In its simplest implementation, Recoil allows you to hold global state in your React App, and then use or update it from any component.

Recoil shines because of how simple it is to use and how little code it takes to get up and running. Recoil eliminates long paths of passed props, and unlike other global state libraries like Redux, there is very little learning curve or boilerplate code for setup.

Today we are going to build an app that demonstrates how simple Recoil is to set up and use.

This guide assumes that you have Node ≥8.10 and NPM ≥ 5.6 on your machine and that you are comfortable using React. Experience with React Hooks will make this even easier.

---

Basic Recoil Functions and hooks:

There are a few functions and hooks that we should get familiar with before building our sample app. Atom, useRecoilState(), useRecoilValue(), and selector.

Atom

An atom represents a single piece of state that can be read or written to from any component. Anytime an atom is updated, all of the components subscribed to it will update. When you create an atom, give it a unique key (unique across all atoms and selectors), and a default value (usually an empty string or object).

const dataAtom = atom({
   key: 'dataAtom',
   default: '',
});

useRecoilState()

Import and use this hook when you need to read AND write to an atom. Pass your atom touseRecoilState(). In our restructuring assignment, we are going to assign one variable for calling our state, and one for updating it.

#javascript #web-development #recoiljs #react #programming