JIYIK CN >

Recoil is a new React state management library that allows us to manage global/shareable state in a Reactish way. The great thing is that Recoil was developed by the Facebook team. In this post, we will look at useRecoilStatehooks and how they made it so "React"?

Let's take a very simple problem statement.

We want to share a count state variable among two sibling/parallel child components.

const C1Component = () => {
    const [count, setCount] = useState(10)
}

const C2Component = () => {
    const [count, setCount] = useState(10)
}

Solution 1: Prop-Drilling

The simplest possible solution is to move the count to a common parent and pass it via a property.

const PComponent = () => {
    const [count, setCount] = useState(10);
    <P1Component count={count}>
    <P2Component count={count}>
}

const P1Component = () => {
    const {count} = props;
    <C1Component count={count}>
}

const P2Component = () => {
    const {count} = props;
    <C2Component count={count}>
}

This solves our problem, but leads to the following

• Here we have a simple level tree, but what if we had more, like 4 or 5 levels? Extracting properties through so many levels would make the code hard to read.
• The entire component tree will re-render - not just the 2 leaf components.
• The parent component will be overloaded with state and may cause unnecessary re-renders.

Second solution: Context API

We can use React's context API. Context provides a way to pass data through the component tree without having to pass it manually at each level.

const CountContext = React.createContext();

<CountContext.Provider value={42}>
    <PComponent />
</CountContext>


const C1Component = () => {
    const value = Readct.useContext(CountContext)
}

const C2Component = () => {
    const value = Readct.useContext(CountContext)
}

We need to wrap the parent component in Context.Provider, and the child components (C1 & C2) can subscribe to it using the useContext hook. This helps us avoid the extraction spiral. However, there are some limitations using this approach:

• You need multiple context providers - a Context.Provider can only share one value, not an indeterminate set of values ​​- each with its own consumer.
• Complex unit test cases – Need to create a mock provider to write unit test cases.
• When the context changes, we will still re-render every component in the tree. (This is why redux is needed, even though the context can manage global state without property spiral extraction)

The third solution: useRecoilState

As I'll show at the end useRecoilState, we can easily do this by using atoms to create a shareable state subscription unit. In order to take advantage of the Recoil API , we need to wrap the parent component in RecoilRoot.

const countAtom = atom({
    key: 'count', // unique ID
    default: 10        // 默认值（初始值）
})

const CountContext = React.createContext();

<CountContext.Provider value={42}>
    <PComponent />
</CountContext>


const C1Component = () => {
    const [count, setCount] = useRecoilState(countAtom)
}

const C2Component = () => {
    const [count, setCount] = useRecoilState(countAtom)
}

Let's see why Recoil is called "Reactish" and "Minimal".

import {atom, useRecoilState} from 'recoil';

<RecoilRoot>
    <PComponent />
</RecoilRoot>

const countAtom = atom({
    key: 'count', // unique ID
    default: 10        // 默认值（初始值）
})

const CountContext = React.createContext();

<CountContext.Provider value={42}>
    <PComponent />
</CountContext>


const C1Component = () => {
    const [count, setCount] = useState(10);
    const [count, setCount] = useRecoilState(countAtom)
}

const C2Component = () => {
    const [count, setCount] = useState(10);
    const [count, setCount] = useRecoilState(countAtom)
}

I compared Recoil useStateand MobX useRecoilStatejust to illustrate how similar the syntax is. However, Recoil's functionality can be compared to other global state management libraries like Redux, MobX, Apollo GraphQL, etc.

Conclusion: Recoil is still in the experimental stage, but is progressing quickly.

Summarize

In this article, we try to introduce you to Recoil, Meta's new state management library for React. Still in the experimental stage, the jury is still out on whether Recoil will replace Redux. But it does seem to have potential.