React State Management (4) : Recoil
Tags: react, beginners
Published: 2022-03-18 19:54:18

This is a series of memos referring to the ways of React state management: context API, Redux, Redux toolkit and Recoil. The topic in this article is [Recoil](https://recoiljs.org/)

The chart below is the whole image of this practice application. ComponentA accepts user input text and passes it over to ComponentB as a prop. At the same time, the atom shares the input and selectors provide uppercased and lowercased input so that ComponentC and componentD can use it. You will see the detailed description later in this article.

![](https://cdn-images-1.medium.com/max/3864/1*8z3shbWkaPnO7R6jhHuo_g.png)

This is the image of this application.

![](https://cdn-images-1.medium.com/max/2000/1*rvnmltYHp9glbnpdvDnKZQ.gif)

First of all, you need to install recoil by

    npm install recoil

or

    yarn add recoil

or

    bower install --save recoil

This is the structure of files in src folder.

![](https://cdn-images-1.medium.com/max/2000/1*iIF-yYWed4FVI0R_lx0rAg.png)

## 1) Wrap around your root component with RecoilRoot

Components using recoil state need to be a child component of RecoilRoot. Your root component is one of the best places to put it.

### index.js
```javascript
    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import { RecoilRoot } from "recoil";

    ReactDOM.render(
      <RecoilRoot>
        <App />
      </RecoilRoot>,
      document.getElementById("root")
    );
```
## 2) create atom
>  An atom represents a piece of state. Atoms can be read from and written to from any component. (more detailed information is [here](https://recoiljs.org/docs/introduction/getting-started#atom))

### text-state.js
```javascript
    import { atom } from "recoil";

    const textState = atom({
      key: "textState",
      default: "",
    });

    export default textState;
```
## 3) read and write an atom by useRecoilState()

### ComponentA.jsx
```javascript
    import { useRecoilState } from "recoil";
    import ComponentB from "./ComponentB";
    import textState from "../recoil/test-state";

    const ComponentA = () => {
      const [text, setText] = useRecoilState(textState);
      const changeHandler = (e) => {
        setText(e.target.value);
      };
      return (
        <>
          <input type="text" value={text} onChange={changeHandler} />
          <ComponentB text={text} />
        </>
      );
    };

    export default ComponentA;
```
## 4) provide derived state by selector
>  A selector represents a piece of derived state. Derived state is a transformation of state. (more detailed information is [here](https://recoiljs.org/docs/introduction/getting-started#selector))

I decided to use it to convert input text to uppercase and lowercase respectively.

### text-uppercase.js
```javascript
    import { selector } from "recoil";
    import textState from "./test-state";

    const textUppercaseState = selector({
      key: "textUppercaseState",
      get: ({ get }) => {
        const text = get(textState);
        return text.toUpperCase();
      },
    });

    export default textUppercaseState;
```
### text-lowercase.js
```javascript
    import { selector } from "recoil";
    import textState from "./test-state";

    const textLowercaseState = selector({
      key: "textUppercaseState",
      get: ({ get }) => {
        const text = get(textState);
        return text.toUpperCase();
      },
    });

    export default textLowercaseState;
```
## 5) use selectors by useRecoilValue

We can use useRecoilValue to read textLowercaseState and textUppercaseState.

### CompomentC.jsx
```javascript
    import { useRecoilValue } from "recoil";
    import textUppercaseState from "../recoil/text-uppercase";

    const ComponentC = () => {
      const uppercaseText = useRecoilValue(textUppercaseState);
      return (
        <>
          <h1>Uppercase</h1>
          <h2>{uppercaseText}</h2>
        </>
      );
    };

    export default ComponentC;
```
### ComponentD.jsx
```javascript
    import { useRecoilValue } from "recoil";
    import textLowercaseState from "../recoil/text-lowercase";

    const ComponentD = () => {
      const lowercaseText = useRecoilValue(textLowercaseState);
      return (
        <>
          <h1>Lowercase</h1>
          <h2>{lowercaseText}</h2>
        </>
      );
    };

    export default ComponentD;
```
Thank you for reading :)

The original article is [here](https://medium.com/@lada496/react-state-management-4-recoil-b03e1d21c029)