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.
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.
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. …
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.
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. …
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.
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. …