One of the primary uses of a state management library is to be able to store and update data across multiple pages without having to directly pass that data throughout the component tree. In this example, we have four sets of components making up our stepper (the three steps, along with a review page) that all share and update the same state, that we have stored inside what Recoil calls an "atom."

With Recoil, setting and accessing global state is as simple as can be. Rather than having to create a complex set of actions and reducers, we can simply declare our atoms and use Recoil's useRecoilState() hooks, among others, in place of a useState() to access our global store.

Recoil comes with a variety of hooks to access and update data efficiently within the store while still feeling React-ish. Here are some examples:

Hook	Purpose
useRecoilValue()	Read data directly out of the store without needing to update it.
useRecoilState()	A replacement for useState() that allows you to read and update a state value in the store.
useSetRecoilState()	For when you just want to be able to update a value in the store.
useResetRecoilState()	Reset a provided Recoil state to its initial, default value.

Recoil works by lifting state above the component tree for storage instead of attempting to pass data through all the nodes of the tree into parent and grandchildren components far down the line. This diagram explains it better than I can:

Recoil also provides us a utility called a selector which just represents a piece of derived state. This kind of derived state allows us to build dynamic data that depends on other data. For example, let's say we have a table of information that we want to be able to filter accordingly.

Granted, this example is entirely possible without Recoil. Recoil will just help to clean up the code a bit and make it easier to read and sift through. Without Recoil, we could create a bunch of separate states and useEffects to filter our data and store it all in separate containers as a user navigates our application.

Instead, Recoil will allow us to contain this data within one selector, that ties back to one atom, and can dispatch an action to filter that original atom's data accordingly for use within our table. This will make more sense once we walk through the code. For now, take a look:

We can also use Recoil's selector syntax to implement statistics regarding our pertinent data with ease, as shown above.