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