Recoil.js is Facebook’s new state management library for React. It’s been designed to handle complex global state management with performance and asynchronous in mind.

If you haven’t heard about it, I suggest watching this excellent introduction video by the creators.

The goal of this article will be to build a COVID tracker app with Recoil and React. It will display the virus data on a map for different statistics and dates.

Here is a live demo of what we’ll build and the full source code.

We’ll be using the Covid-19 REST API to fetch the data we need.

While being relatively simple, this app will allow us to touch on quite a few interesting topics :

• Representing and manipulating state with Recoil
• Querying an API and handling asynchronous state
• Prefetching data and caching previous requests
• Displaying a map and adding data to it with Deck.gl
• Styling components with styled-components and dynamic styles
• Optimization with useMemo

Project Setup

Let’s start by setting up the project with create-react-app

yarn create react-app react-recoil-covid-tracker
cd react-recoil-covid-tracker
yarn start

Let’s cleanup the boilerplate code by deleting App.css , App.test.js and logo.svg

#react #reactjs #recoil #javascript #recoiljs