Yiyang Sun

Love for life and frontend tech.

GitHubPostsLinksResume

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.

cd ../