Skip to main content
Deno 2 is finally here 🎉️
Learn more
Module

x/jotai/docs/basics/concepts.mdx

👻 Primitive and flexible state management for React
Go to Latest
File
---title: Conceptsnav: 1.01---
Jotai was born to solve extra re-render issues in React.An extra re-render is when the render process produces the same UI result,where users won't see any differences.
To tackle this issue with React context (useContext + useState),one would require many contexts and face some issues.
- Provider hell: It's likely that your root component has many context providers, which is technically okay, and sometimes desirable to provide context in different subtree.- Dynamic addition/deletion: Adding a new context at runtime is not very nice, because you need to add a new provider and its children will be re-mounted.Traditionally, a top-down solution to this is to use a selector interface.The [use-context-selector](https://github.com/dai-shi/use-context-selector) library is one example.The issue with this approach is the selector function needs to returnreferentially equal values to prevent re-renders, and this often requires a memoization technique.
Jotai takes a bottom-up approach with the atomic model, inspired by [Recoil](https://recoiljs.org/).One can build state combining atoms, and optimize renders based on atom dependency.This avoids the need for memoization.
Jotai has two principles.
- Primitive: Its basic interface is simple, like `useState`.- Flexible: Derived atoms can combine other atoms and enable `useReducer` style with side effects.Jotai's core API is minimalistic and makes it easy to build utilities based upon it.
Check out [comparison doc](../basics/comparison.mdx) to see some differences with other libraries.