0PricingLogin
React Academy · Lesson

Reading and Writing Atoms with useAtom

Use useAtom, useAtomValue, and useSetAtom to read and update atoms across the component tree.

useAtom: The Primary Hook

useAtom(someAtom) returns [value, setter], mirroring the useState API. The value is the current atom state; the setter updates it. Use this when a component both reads and writes the atom.

The setter accepts either a new value or an updater function: setCount(c => c + 1).

useAtomValue: Read-Only Access

useAtomValue(someAtom) returns only the current value, with no setter. Use this in display-only components that read state but never modify it.

Because the component does not hold a setter reference, the intent is clearly documented in code: this component is a pure reader.

All lessons in this course

  1. Atoms: The Unit of State in Jotai
  2. Reading and Writing Atoms with useAtom
  3. Derived Atoms and Async Atoms
  4. Jotai vs Zustand vs Context: When to Use Which
← Back to React Academy