React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

[Recoil](https://recoiljs.org/) is a brand new state management library for React, developed by Facebook.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

This quick collection will get you up and running with Recoil, you're going to learn how to:

* add Recoil to your React project
* create a Recoil atom and use it to store a piece of state
* use `useRecoilState` hook to update an atom
* use `useRecoilValue` to access value stored in an atom in a read-only fashion
* use 🔥`selectors`🔥 in order to calculate derived data based on state stored within atoms (this is *really* powerful!) 

[Recoil](https://twitter.com/recoiljs/status/1260965007954591744) is a brand new state management library for React developed by Facebook.

In this quick lesson we're going to learn how to add it to a React app and how to use a Recoil atom in order to share state between two React components using `useRecoilState` hook

 

Use a Recoil Atom to Share State Between Two React Components

Not every component is going to modify a 'global' state stored in a Recoil atom - in some cases a component just needs to be able to read the value.

In this quick lesson we're going to learn how to use a `useRecoilValue` hook to ensure that a component will be able to read a number stored in a Recoil atom in a read-only fashion. 

Use useRecoilValue Hook to Read a Value From a Recoil Atom

Recoil allows us to use atoms in order to store pieces of state. More often than not in our apps we need to use data that derives from our application state (for instance to multiply height and width stored within a state to calculate area of an element).

Luckily Recoil provides us with a powerful tool to automatically re-calculate derived state value whenever an piece of state changes - selectors.

A [selector](https://recoiljs.org/docs/introduction/core-concepts#selectors) is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated.

In this quick lesson we're going to learn how to use a selector in order to automatically calculate a square of a number whenever a value stored within an atom is going to change

Use Selectors to Calculate Derived Data Based on State Stored within a Recoil Atom

In this collection, you'll create a simple game with React using Recoil, to explore how you can share and update state across an app.

Getting Started with Recoil in React

Start with the basics of state management and dive further into the selector API, as well as learning different strategies for handling synchronous and asynchronous Selectors 

Manage React State with Recoil

This is a series of videos where you'll find part interview and part screen share with experts. They focus on React, but the underlying principles are valid for UI work in general.

React State Management Expert Interviews

The Beginner's Guide to React

Sync State Across Components with Recoil in React

https://app.egghead.io/api/v1/lessons/react-use-a-recoil-atom-to-share-state-between-two-react-components/subtitles

Tomasz Łakomy: [0:00] We have a brand-new React project and we would like to add Recoil to it. Recoil is a state management library for React, which was created by Facebook team.

[0:08] First up, open up the terminal and run yarn add recoil. Of course, you can use npm as well. It's fine. After it's successfully installed, close the terminal and I'm going to import {RecoilRoot} from "recoil". All the components that are going to use the Recoil state need this RecoilRoot component to appear somewhere in the parent tree.

[0:29] What I'm going to do is that I'm going to wrap our entire app in the RecoilRoot component. Let me just go over here and do that quickly. Save.

[0:37] Now, we can create our very first atom. In recall, atom represents a piece of state. First up, let me import {atom} from "recoil". Next, create an atom for our counter component. I'm going to do const numState = atom().

[0:51] Atom takes an object with two feats that are necessary. First up is the key, which has to be unique. I'm just going to call it numState. Secondly, there's the default value, which I'm going to set to .

[1:01] Next, I'm going to create a Counter component. For now, it's just going to render a button with a value of . Let me add it over here. To use our atom in our Counter component, we have to import {useRecoilState} from "recoil".

[1:14] In our Counter component, I'm going to destructure number and setNumber from useRecoilState(numState). Let me save that. In order to use the RecoilState, we have to pass in the atom. Right now, if I take this number and use it over here, we can see that this value is still .

[1:30] If I do onClick =, and I'm going to pass in a function which is going to set the number to number + 1, we can see that if I click on the button, the Counter state is going to be updated. The best part of having atoms is that we can use the same state in multiple components.

[1:46] If I create a new function, which I'm going call Display(), and this function is going to return a <div> with a number, I can do exactly the same thing that we did over here. Let me copy that and paste it. Since we are not going to use the set number, I am not going to destructure that.

[2:02] If we save that and use this Display component over here, Display, we can see that if I click on the button, both of those components are going to be updated. The reason why it happens is that both of them are using the same atom in order to keep track of their numState.

https://app.egghead.io/api/v1/lessons/react-use-a-recoil-atom-to-share-state-between-two-react-components/transcript

https://app.egghead.io/api/v1/lessons/react-use-userecoilvalue-hook-to-read-a-value-from-a-recoil-atom/subtitles

Tomasz Lakomy: [0:00] We have a small counter app example. This app is using a single atom, which is called numState, in order to share the state between the Counter and the Display component. The counter is this button over here and the counter is that read-only value.

[0:13] There's a difference between those two components because in the Counter, we are using both number and setNumber from the useRecoilState, whereas in Display, we are not using the setNumber. Instead, we are just displaying this value.

[0:24] In that case, instead of using the useRecoilState hook, we can go ahead and import useRecoilValue and use it over here. Instead of this, I'm going to useRecoilvalue. We are not going to get the setNumber. Instead, we're just going to get the number. If I save that, we can see that our app still works fine.

[0:43] To recap, if you have a component that is just going to read the value stored within an atom, instead of using the useRecoilState, it is a better approach to use the useRecoilValue hook.

https://app.egghead.io/api/v1/lessons/react-use-userecoilvalue-hook-to-read-a-value-from-a-recoil-atom/transcript

https://app.egghead.io/api/v1/lessons/react-use-selectors-to-calculate-derived-data-based-on-state-stored-within-a-recoil-atom/subtitles

Tomasz Łakomy: [0:00] We've added one more component to our app and that is the Square component. Here, what we would like to do is to get the value stored within the numState and calculate the square of it. For 4, it's going to be 16, for 5, it's going to be 25, and so on.

[0:13] In other words, we would like to be able to make some calculation based on the value stored within this atom. Whenever this atom is going to be updated by either the counter component or some other component in our app, we would like the square value to be recalculated. In order to do that, we are going to use Recoil selectors.

[0:29] First up, import selector from "recoil". In Recoil, a selector is a pure function that accepts atoms or some other selectors as input. What's going to happen is that a selector is going to calculate a derived state.

[0:44] In that case, you can think of derived state as the output of passing the state, in our case the numState, to a pure function that is going to modify the state in some way such as calculating a square of the number stored within the numState atom.

[0:57] To create a selector, let's do const squareState = selector. That is going to take an object as an argument. Similar to an atom, we have to specify a key. In that case, it's going to be key: "squareState". Secondly, we have to specify a get property. This get property is the function that it is to be computed. This function can access the value of atoms or some other selectors.

[1:20] First, let me create a function. We have to get the get argument that is passed to it. This get argument is a function that we can use to get values from atoms and other selectors. Here, I'm going to do return get(numState) **2. I'm going to square it as well so that our squareState is going to be always equal to a square of this numState. That is awesome.

[1:41] Let's use our brand-new selector. I'm going to scroll down over here. In the Square method, I'm going to do const squareNumber. I'm going to do useRecoilValue. I'm going to get the squareState. Instead of displaying that, I'm going to display the squareNumber.

[1:57] If I save that, our app is going to work as intended. Right now, if I click on Increment, the number is going to be equal to 4 and the square is going to be equal to 16.

[2:06] To recap, in Recoil, if you want to keep the track of core pieces of our state, we have to use atoms, but if you would like to calculate some other pieces of state based on those atoms, we have to use selectors.

[2:18] Selectors are really powerful because as we see in this example, whenever the numState is going to be changed by any component, the squareState is going to be recalculated automatically because it is based on this numState. This approach allows us to have a minimum number of atoms and only use the selectors to calculate derived data from those atoms.

https://app.egghead.io/api/v1/lessons/react-use-selectors-to-calculate-derived-data-based-on-state-stored-within-a-recoil-atom/transcript

Sync State Across Components with Recoil in React

Tomasz Łakomy

What you'll learn:

Prerequisites:

You might also like these resources:

Getting Started with Recoil in React

Manage React State with Recoil

React State Management Expert Interviews

Course Content

You might also like these resources:

Getting Started with Recoil in React

Manage React State with Recoil

React State Management Expert Interviews