What is Jotai?

Primitive and flexible state management for React

Jotai is a primitive and flexible React state management library

  • Original: apis are all based onHooksMethod is provided and used in a manner similar touseState.useReducer
  • Flexible: Multiple combinations can be madeAtomTo create a newAtomAnd supports asynchrony

At the same time, I think Jotai is a small, clean, and high-performance state management library

Jotai is a simplified version of Recoil, using Atom + Hook + Context to solve the React global data flow management problem

Atom is the state management unit in Jotai. It can be updated and subscribed, and when Atom is updated, the component subscribed to Atom is re-rendered with the new value

Also, updating the corresponding Atom will only re-render the component that subscribed to the Atom, not the entire parent, as the Context does, so accurate rendering can be done

How is Jotai different from Recoil?

Jotai and Recoil are similar in concept in that they both adopt a decentralized design pattern for managing atomic states

So the usage is also relatively similar, but in comparison, there are the following advantages

  • JotaiThe API is relativelyRecoilMuch simpler and easier to use
  • JotaiDon’t need to useRecoilRoot 或 ProviderAnd other components wrapped, making the structure can be more concise
  • JotaidefineAtomDo not provide the key
  • JotaiSmaller, just 2.4 kB in size
  • Jotai 对 TypeScriptBetter support

How do I use Jotai?

Install Jotai

npm install jotai
Copy the code

To define the Atom

An Atom represents a state

The atom function creates an Atom by passing in a parameter that specifies the initial value, which can be a string, number, object, array, and so on

import { atom } from "jotai";

const valueAtom = atom(0);
Copy the code

The use of the Atom

The useAtom function takes an Atom as an argument

The return value is an array

The first value of the array is the value stored by Atom, and the second value is the function that updates the Atom value

import { useAtom } from "jotai";

const Component = () = > {
  // React. UseState
  // const [value, setValue] = useState(defaultValue);
  const [value, setValue] = useAtom(valueAtom);
}
Copy the code

The complete code

The following code has been written in CodeSandbox, you can click the link below to run the code online

Running code online

import { atom, useAtom } from "jotai";

// Define an Atom with a default value of 0
const valueAtom = atom(0);

// Display area
const Text = () = > {
  // 使用这个Atom
  // React. UseState
  // const [value, setValue] = useState(defaultValue);
  const [value] = useAtom(valueAtom);

  return <div>{value}</div>;
};

// Button area
const Button = () = > {
  // The first value is not needed here, just the second value, the update function
  const [, setValue] = useAtom(valueAtom);

  // Use the setValue function to update the value of valueAtom

  const add = () = > {
    setValue((prev) = > prev + 1);
  };

  const dec = () = > {
    setValue((prev) = > prev - 1);
  };

  const reset = () = > {
    setValue(0);
  };

  return (
    <div>
      <button onClick={add}>+</button>
      <button onClick={dec}>-</button>
      <button onClick={reset}>reset</button>
    </div>
  );
};

export default() = > {return (
    <div>
      <Text />
      <Button />
    </div>
  );
};
Copy the code

conclusion

If you find Redux too mentally taxing and cumbersome to use, and want a lightweight, easy-to-use, and well-performing state management library, try Jotai

A link to the

More detailed documentation and use cases are available on Github

Jotai Github

Articles about Recoil

Facebook’s new React state manager library, Recoil