Difference between useAtom
and useState
Similarity
Recently I'm using React and Hooks to build up a SPA. The project uses jotai
for global state management.
The usage of useState
and useAtom
is very similar.
// useState
const [state, setState] = useState(false)
// useAtom
const stateAtom = atom(false)
const [state, setState] = useAtom(stateAtom)
Both functions return a stateful value and a function to modify it.
Difference
The main difference is that every time useState
is called, a new stateful value is created and set to initial value.
While useAtom
returns a consistent stateful value (as long as the same atom is used) every time it is called. It means if you modify the value in a.ts
, in b.ts
you will get the latest value it you call useAtom
instead of an independent new value.
Conclusion
If a consistent stateful value is needed across several modules, use jotai
. That's what it is built for.