Fetching data from a resource, such as a JSON API is a common thing these days, and so is the use of asynchronous (async) functions that avoid locking up applications.
In React components, async functions have some additional caveats to keep in mind that –if left unchecked– can introduce memory leaks or race conditions.
In this article, we’ll be covering a small app that fetches articles from an API and lists them out. We’ll take a look at async functions in a React component, address caveats, and checkout making our function reusable as a custom React hook.
This article will cover:
Async/Await use in a React component
Writing cleaner code with custom hooks
Testing async/await in Jest
Prerequisites
Familiar with functional React component basics
Basic understanding of async/await