Using useEffect, useRef and TypeScript

Image for post
Image for post
Photo by Jeremy Perkins on Unsplash

The Fetch API supports cancelling requests using AbortController interface. We can therefore cancel in-flight requests in our applications without the need for including external fetching libraries like axios.

Example of the `AbortController` API

Above we can see how we can use an AbortController to cancel an in-flight fetch request.

But this basic example is not indicative of how you would use this API in your applications. Let’s instead look at a real world example.

Cancelling Fetch Requests in React Applications

We will create a React application that allows users to type in a search term. Then our application will call an API, and return a list of matching users. …

Use it today with SWR and TypeScript

Image for post
Image for post
Photo by Brooke Cagle on Unsplash

Suspense For Data Fetching

Suspense for Data Fetching is an experimental feature in ReactJS. It allows us to “wait” for some code to load, and to declare a loading state while we are waiting. useSWR is a library that takes all the complexity out of data fetching and data caching in React applications. useSWR also supports React Suspense for data fetching.

If you are unfamiliar with useSWR, be sure to check out our previous article on the subject.

Getting started

Let’s start by creating a brand new Create React App. Run the following command.

npx create-react-app --template typescript suspense-swr

After it finishes installing our dependencies and bootstrapping our application, cd into the directory and run yarn add swr. …

What to expect from the release

Image for post
Image for post
Photo by Md Mahdi on Unsplash

Create-React-App allows us to scaffold new React applications. It’s an incredibly useful tool for building React applications. It keeps all of our dev dependencies like webpack, ESLint and babel inside of react-scripts. That means, that in order to update these dependencies, we need to wait for an update to Create-React-App. Lucky for us, that day is here.

Yesterday Create-React-App version 4 was released.

Let’s go over the new features you can expect from updating, and the migration steps you may have to go through to successfully upgrade.


• Fast Refresh

If you have worked with NextJS, then you know just how awesome Fast Refresh is. Fast Refresh is a replacement for React Hot Loader. Its big advantages include amazing performance and state preservation on component reload. …


Malcolm Laing

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store