Jotai

Overview

Jotai is a flexible and performant state management library designed for React applications. Developed in 2020, its core philosophy revolves around a minimalistic, atom-based approach, where state is broken down into small, isolated units called "atoms" (Jotai Introduction). Each atom holds a piece of state and can be read from or written to by React components. Components subscribe only to the specific atoms they use, ensuring that only relevant parts of the UI re-render when an atom's value changes. This fine-grained update mechanism helps optimize performance, particularly in complex applications with frequently changing state.

Jotai aims to provide a developer experience that is both simple and powerful. Its API is designed to be concise, leveraging React Hooks for state interaction. For instance, the useAtom hook is central to both reading and updating atom values within components (Jotai API Utilities). The library offers excellent out-of-the-box TypeScript support, which can be beneficial for type safety and code maintainability in larger projects. While it provides a basic set of utilities, Jotai is also highly extensible, allowing developers to build custom atoms and integrate with other libraries or patterns as needed. This flexibility positions Jotai as a suitable choice for a broad range of React projects, from small components to large, enterprise-level applications.

One of Jotai's key strengths lies in its commitment to minimal re-renders. By allowing components to subscribe to individual atoms rather than a larger global store, it avoids the common pitfalls of over-rendering where changes in one part of the state tree trigger updates across unrelated components. This approach aligns with modern React best practices focused on optimizing render cycles (React Dev Understanding UI Rendering). Jotai also offers various utility atoms, such as those for derived state, asynchronous operations, and persisting state, which further streamline common state management patterns. Its lightweight nature and focus on developer ergonomics make it an increasingly popular choice for developers seeking an alternative to more opinionated or boilerplate-heavy state management solutions.

Key features

• Atom-based state: Defines state in small, isolated, and composable units called atoms.
• Minimal re-renders: Components subscribe only to the atoms they consume, leading to fine-grained updates and optimized performance.
• React Hooks API: Integrates seamlessly with React's Hooks API (e.g., useAtom) for a familiar developer experience.
• TypeScript support: Provides strong type inference and safety for state definitions and usage, enhancing code reliability.
• Derived state: Allows creating computed atoms based on the values of other atoms, automatically updating when dependencies change.
• Asynchronous state: Supports handling asynchronous operations and promises within atoms, simplifying data fetching and loading states.
• Persistence utilities: Offers utilities for persisting atom state to various storage mechanisms (e.g., local storage).
• DevTools (Jotai-X): Provides a dedicated browser extension for inspecting and debugging Jotai state in development.
• Framework Agnostic (Core Logic): The core logic of Jotai is not strictly tied to React, making it conceptually portable, though primarily used with React.

Pricing

As of May 7, 2026, Jotai is an open-source library and is available for use free of charge. There are no licensing fees or commercial tiers associated with its core functionality.

For more details on Jotai's open-source status, refer to the Jotai GitHub repository license.

Common integrations

• React: Jotai is purpose-built for React applications, leveraging its component lifecycle and Hooks API (React.dev homepage).
• React Native: Can be used for state management in mobile applications built with React Native due to its lightweight nature.
• Next.js: Integrates with Next.js for server-side rendering (SSR) and static site generation (SSG) scenarios, allowing state to be hydrated (Next.js Jotai SSR).
• Remix: Compatible with Remix applications for managing client-side state alongside Remix's loader and action data.
• tRPC: The jotai-trpc package provides utilities for integrating Jotai with tRPC, enabling type-safe state derived from API calls (Jotai tRPC Integration).
• Web Workers: Can be used with Web Workers for offloading intensive computations and managing their state through Jotai atoms.

Alternatives

• Recoil: Another atom-based state management library developed by Facebook, offering a similar declarative approach to state (Recoil homepage).
• Zustand: A minimalist, hook-based state management library that focuses on simplicity and small bundle size, often used as a direct alternative for its ease of use (Zustand demo).
• Redux Toolkit: The official recommended way to use Redux, providing utilities to simplify Redux development, including state slices and an opinionated setup for larger applications (Redux Toolkit documentation).
• Context API + useReducer: React's built-in solution for global state, suitable for simpler scenarios but can lead to performance issues if not carefully optimized for re-renders.
• Apollo Client / React Query: While primarily data-fetching libraries, they also manage server cache and provide local state management capabilities, often reducing the need for a separate global state library.

Getting started

To begin using Jotai, install it via npm or yarn. Then, define an atom and use it within a React component.

// Install Jotai
npm install jotai
// or
yarn add jotai

// src/atoms.ts
import { atom } from 'jotai';

// Define a basic atom
export const countAtom = atom(0);
export const textAtom = atom('Hello, Jotai!');

// Define a derived (read-only) atom
export const upperCaseTextAtom = atom((get) => get(textAtom).toUpperCase());

// src/App.tsx
import React from 'react';
import { useAtom } from 'jotai';
import { countAtom, textAtom, upperCaseTextAtom } from './atoms';

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

function TextInput() {
  const [text, setText] = useAtom(textAtom);
  const [upperCaseText] = useAtom(upperCaseTextAtom);

  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <p>Original: {text}</p>
      <p>Uppercase: {upperCaseText}</p>
    </div>
  );
}

export default function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>Jotai Example</h1>
      <Counter />
      <hr />
      <TextInput />
    </div>
  );
}

This example demonstrates creating a simple counter and a text input with a derived uppercase version, all managed by Jotai atoms. The useAtom hook provides both the current state value and a function to update it, similar to React's useState. Derived atoms automatically re-evaluate when their dependencies change, providing a reactive way to compute state (Jotai Derived Atoms Guide).