Explore some of the main features of Facebook’s experimental state management library Recoil by building a CRUD app.

Redux has been, by far, the leader in state management for React apps. With more than 53K stars on GitHub, it is mature, robust, and highly supported by its community.

Recoil is the Facebook team’s new bet to address the same issue. After working a bit with Recoil, one of the main feelings I had is this (not-so-weird) sensation of being in the React world entirely. The learning curve is lower than Redux and other similar libs, perhaps because of its simple nature.

Recoil is based on atoms and selectors. In short, the atoms are the global units that store the state’s values, while the selectors are “getters” that retrieve computed values from the global store.

Our focus, however, is not to explain the lib in detail. You can read that here — and you should.

Our goal is to explore some of Recoil’s main features in practice. For this, let’s create a fully functional CRUD of products with React, create-react-app, react-bootstrap (to facilitate with the design and stuff), and Recoil for state management.

At the end of the article, this would be our CRUD app:

So, let’s get straight to it.

#react #javascript #facebook #developer