Recoil is a new (experimental!) library from facebook that can handle complex shared data across a large react app.

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

Recoil is similar to (but different than) Context, Redux, or other shared state libraries (like MobX), but is designed to handle large (and variable) numbers of state that can update without re-rendering your entire app's component tree.

We'll create a new React game with:

```
npx create-react-app paper-game
cd paper-game
```

and then install Recoil with:

```
npm install recoil
```

and start the server:

```
npm start
```

Then, to wrap the entire app in the recoil root, we'll import `RecoilRoot` from `recoil` and wrap the app:

```
    <RecoilRoot>
      <Game />
    </RecoilRoot>
```

And the app is now up and running - ready to use Recoil



Set Up Recoil in a new React App

We'll create a new bit of shared state (called an "atom" in Recoil) by importing `atom` from Recoil and setting a unique key and default value:

```
import {
  atom
} from 'recoil'

const gameScore = atom({
  key: 'gameScore',
  default: 0
})
```

Then we can use that `gameScore` by calling the Recoil hook `useRecoilState`

```
import {
  useRecoilState
} from 'recoil'

...

  const [score, setScore] = useRecoilState(gameScore)
```

That looks a lot like a local `useState` call - but is different because it creates the state in Recoil, which can then be used in this component, or in any other component in the tree (underneath the same `RecoilRoot`)

Create Shared State with Recoil in a React App

To get a value from Recoil we can import the atom that we want and the hook `useRecoilValue` from recoil.

Then we can get the value:

```
import { useRecoilValue } from 'recoil'
...
import { gameScore } from './atoms'
...
const score = useRecoilValue(gameScore)
```

And display it in a lablel:

```
<h3>Score: {score}</h3>
```

That value will update every time the button is clicked (and `setScore` is called) automatically!

Read a Value from Recoil with useRecoilValue

To compute a value from one or more values stored in Recoil, we can create a "selector".

First import `selector` from Recoil, and then call it with an object that has two keys: `key` and `get`:

```
import { selector } from recoil;
...
const paperSize = selector({
  key: 'paperSize',
  get: ({get}) => {
    const score = get(gameScore)
    return 100 + (score * 5)
  }
})
```

Inside of the `get` function we can get the current value of the `gameScore` atom from recoil, and then compute a new value from that to return to our game.  Then we can get the value using `useRecoilValue`:

```
import { paperSize } from './selectors'
...
const size = useRecoilValue(paperSize)
```


Compute a Value in Recoil Using a Selector

To change a value in state we can do that directly (by pulling the atom with `useRecoildState`), or we can write a custom hook that will change the value for us:

```
const useResetScore = () => {
  const [score, setScore] = useRecoilState(gameScore)
  return () => {
    setScore(0)
  }
}
```

That function returns a function that we can then call from a component like any other hook:

```
  const resetScore = useResetScore()
```

and then we can use that new `resetScore` function for the `onClick` of a button:

```
<button onClick={resetScore}>Reset</button>
```

which will change the value in the Recoil state.

That's a simplistic example of a custom hook - but that hook could then be extended to do multiple state changes, and then could be imported into any component in the React tree and used.

Write a Custom Recoil Hook to Reset a Value in the Recoil State

Instead of just returning a value from a recoil selector, you can return any promise, which means that you can do asynchronous functions in recoil selectors (this is a little like a redux thunk).

The huge bonus is that you don't have to do anything different when actually calling the selector - use can use `useRecoilValue` in the same way that you would from a normal selector.

The only thing you must do is somewhere in the component tree, wrap any component that uses an async selector with a `<React.Suspense>` tag with a `fallback` prop that will tell React what to display when the async selector isn't loaded yet.





Getting Started with Recoil in React

Instructor

Course content (6 lessons)

Instructor