Jotai — new state management library for React

5 things about Jotai to get in depth understanding

Jotai
Recently I found this new state management library for react applications.

Primitive and flexible state management library for React. Primitive is because at the core level meaning very basic and unsophisticated.

The reason behind this is that Jotai deals with atomic level with a bottom-up approach inspired by Recoil.

In simple words, most of the libraries and state management libraries for React deal with the top-bottom approach.

Top-Bottom Approach — Wrap the provider with the root component and pass the centralised states of the entire application via props.

Bottom-Top-Approach — Each and every component has its individual states at the atomic level.

First

Lightweight with just 3Kb in size and has 10K github start at the time of writing.

Jotai npm package

Introductory video

Second

Jotai is different from other state management libraries because it follows a bottom-to-top approach rather than a top-to-bottom approach.

Basically, we don’t wrap the root of the application with the provider in jotai instead we create each component level state and combine them to create the entire application state using atoms.

Third

Jotai is easy to install with just one line of code and no other dependency is required.

yarn add jotai

No need to install other loaders or wrapping of the provider.

Fourth

Jotai provides hooks and methods to deal with managing states. Hooks such as -

• useAtom
• useAtomValue
• useSetAtom

and a method called atom to create states exactly like useState.

If you are familiar with hooks you will easily work with Jotai.

Fifth

Jotai is compatible with the following -

1. Next.js
2. React
3. React Native
4. Typescript
5. Redux
6. Xstate
7. TanStack Query

Jotai docs link

Conclusion

Here is the list of code samples of projects using Jotai - Code samples

Keep developing
Shrey
iHateReading