Skip to main content
Get up and running with Jotai in your React application. This guide will walk you through creating your first atoms and using them in components.
1

Install Jotai

First, install Jotai in your project:
npm install jotai
2

Create your first atom

An atom represents a piece of state. Create a file for your atoms:
atoms.ts
import { atom } from 'jotai'

// Primitive atom with initial value
export const countAtom = atom(0)

// Derived atom (read-only)
export const doubledCountAtom = atom((get) => get(countAtom) * 2)
Atoms can hold any value: primitives, objects, arrays, or functions
3

Use atoms in your component

Use the useAtom hook to read and write atom values:
Counter.tsx
import { useAtom } from 'jotai'
import { countAtom, doubledCountAtom } from './atoms'

function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const [doubled] = useAtom(doubledCountAtom)

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Doubled: {doubled}</h2>
      <button onClick={() => setCount((c) => c + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  )
}

export default Counter
4

Use it in your app

Import and use your component:
App.tsx
import Counter from './Counter'

function App() {
  return (
    <div>
      <h1>My Jotai App</h1>
      <Counter />
    </div>
  )
}

export default App
No Provider needed! Jotai works out of the box with a default store.

​
Complete example

Here’s a complete working example you can copy: 
import { atom, useAtom } from 'jotai'

// Create atoms
const countAtom = atom(0)
const doubledCountAtom = atom((get) => get(countAtom) * 2)

// Use in component
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  const [doubled] = useAtom(doubledCountAtom)

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Doubled: {doubled}</h2>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  )
}

export default Counter

​
Next steps

Core concepts

Learn about atoms, derived atoms, and async atoms

Utilities

Explore built-in utilities like atomWithStorage

TypeScript

Learn TypeScript patterns and best practices

API reference

Explore the complete API documentation

​
What makes Jotai special?

  • Minimal API - Just 2kb core with a simple, intuitive API
  • No string keys - Unlike Recoil, atoms are referenced by identity
  • TypeScript-first - Full type inference and type safety
  • Flexible - Works with Next.js, React Native, and any React app
  • Performance - Only re-renders components that use changed atoms

Build docs developers (and LLMs) love

Get started for freeTalk to us