The React ecosystem is a dynamic and ever-evolving landscape, particularly in the realm of state management. For years, developers navigated the trade-offs between the simplicity of component state, the verbosity of Redux, and the re-rendering challenges of the Context API. The latest wave of state management libraries, however, signals a paradigm shift towards simplicity, performance, and developer experience. This wave of React News brings us to Jotai, a primitive and flexible state management library that leverages an atomic model inspired by Recoil but with a more minimalistic API.
Jotai, which means “state” in Japanese, offers a compelling proposition: manage global and local state with the ease of a useState hook but without the performance pitfalls of prop-drilling or large context providers. Its bottom-up approach, where state is built from small, isolated pieces called atoms, ensures that only the components that subscribe to a specific piece of state will re-render when it changes. This makes it an incredibly powerful tool for modern React applications, from simple projects to complex enterprise-level systems built with frameworks like Next.js, Remix, or Gatsby. This article provides a comprehensive exploration of Jotai, from its core concepts to advanced techniques and best practices.
Understanding the Core of Jotai: Atoms and Hooks
At the heart of Jotai is the concept of an “atom.” An atom is a small, isolated piece of state. It can hold any type of data—primitives like strings and numbers, or complex objects and arrays. This atomic approach is what sets Jotai apart from monolithic state stores found in libraries like Redux. Instead of a single, large state tree, you build your application’s state by composing these small, independent atoms.
Defining and Using a Basic Atom
The API for Jotai is intentionally minimal. The primary function you’ll use is atom() to create a state definition and the useAtom() hook to interact with it inside a React component. The useAtom hook returns a tuple, [value, setValue], which is intentionally identical to React’s built-in useState hook, making it instantly familiar.
Let’s look at a simple counter example:
import { atom, useAtom } from 'jotai';
// 1. Define an atom. This is our piece of state.
// It's defined outside the component, making it globally accessible.
const countAtom = atom(0);
const Counter = () => {
// 2. Use the atom in a component.
// This hook subscribes the component to changes in countAtom.
const [count, setCount] = useAtom(countAtom);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
<button onClick={() => setCount((c) => c - 1)}>Decrement</button>
</div>
);
};
// In your App.js
export default function App() {
return (
<div>
<h2>Component One</h2>
<Counter />
<h2>Component Two (shares the same state)</h2>
<Counter />
</div>
);
}In this example, both <Counter /> components share and interact with the exact same piece of state, countAtom. When one component updates the state, the other automatically re-renders with the new value. This is achieved without any props or context providers.
Derived Atoms: Computing State on the Fly
Jotai’s power truly shines with derived atoms. A derived atom computes its value based on one or more other atoms. It’s a reactive calculation that automatically updates whenever its dependencies change. This is perfect for creating computed values without cluttering your components with useMemo or useEffect.
A read-only derived atom is created by passing a function to atom(). This function receives a get argument that allows it to read the value of other atoms.
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
// This is a read-only derived atom.
// It depends on countAtom.
const isEvenAtom = atom((get) => {
const count = get(countAtom);
return count % 2 === 0;
});
const CounterStatus = () => {
// This component only subscribes to isEvenAtom.
// It will NOT re-render when `countAtom` changes, unless the
// result of the isEvenAtom calculation also changes.
const [isEven] = useAtom(isEvenAtom);
return <p>The count is {isEven ? 'Even' : 'Odd'}.</p>;
};
const Counter = () => {
const [count, setCount] = useAtom(countAtom);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
<CounterStatus />
</div>
);
};Here, CounterStatus only knows about isEvenAtom. It remains blissfully unaware of the underlying countAtom. This granular subscription model is the key to Jotai’s excellent performance, preventing the cascading re-renders common in other state management solutions.
Practical Implementation: Building a Dynamic To-Do List
Let’s apply these concepts to a more realistic scenario: a to-do list application. This example will showcase how to manage a list of items, derive filtered lists, and handle updates through specialized “action” atoms. This pattern is highly scalable and keeps business logic out of the UI components, a principle that resonates well in the latest Next.js News and Remix News about building maintainable applications.
Defining the State Structure
First, we define our core atoms. We need one for the list of all to-dos and another to control the filter (e.g., “all”, “completed”, “incomplete”).
import { atom } from 'jotai';
// Atom to hold the array of all todo items
export const todosAtom = atom([
{ id: 1, text: 'Learn Jotai', completed: true },
{ id: 2, text: 'Build a project', completed: false },
{ id: 3, text: 'Deploy the app', completed: false },
]);
// Atom to hold the current filter state
export const filterAtom = atom('all'); // 'all', 'completed', 'incomplete'
// Derived atom that returns the filtered list of todos
export const filteredTodosAtom = atom((get) => {
const filter = get(filterAtom);
const todos = get(todosAtom);
if (filter === 'completed') {
return todos.filter((todo) => todo.completed);
}
if (filter === 'incomplete') {
return todos.filter((todo) => !todo.completed);
}
return todos;
});Creating Action Atoms
To modify our state, we can create write-only atoms. These atoms don’t hold a value themselves; their purpose is to encapsulate the logic for updating other atoms. This is a powerful pattern for creating reusable actions.
A write-only atom is defined by passing null as the first argument and a write function as the second. This function receives get, set, and the action’s payload (update).
// A write-only atom to add a new todo
export const addTodoAtom = atom(
null, // read function is null
(get, set, newTodoText) => {
const newTodo = {
id: Date.now(),
text: newTodoText,
completed: false,
};
set(todosAtom, [...get(todosAtom), newTodo]);
}
);
// A write-only atom to toggle a todo's completed status
export const toggleTodoAtom = atom(
null, // read function is null
(get, set, todoId) => {
const updatedTodos = get(todosAtom).map((todo) =>
todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
);
set(todosAtom, updatedTodos);
}
);Now, our UI components can use these atoms to perform actions without needing to know the implementation details of the state update. A component that adds a to-do only needs to call the setter for addTodoAtom, making it clean and decoupled.
Advanced Techniques: Asynchronous Operations and Scoping
Modern web applications are rarely synchronous. Jotai provides elegant, first-class support for asynchronous operations directly within atoms. This capability puts it in the same conversation as data-fetching libraries, and the latest React Query News and Urql News often include comparisons to this new breed of state managers.
Asynchronous Atoms for Data Fetching
An async atom is defined just like a derived atom, but its read function is asynchronous. Jotai integrates seamlessly with React Suspense, meaning you can fetch data in an atom and let Suspense handle the loading states automatically.
import { atom } from 'jotai';
import { Suspense } from 'react';
// Async atom to fetch user data
const userIdAtom = atom(1);
const userAtom = atom(async (get) => {
const id = get(userIdAtom);
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
if (!response.ok) {
throw new Error('Failed to fetch user');
}
return response.json();
});
// A component that displays the user data
const UserProfile = () => {
// When this component renders, it will suspend while the userAtom is fetching.
const [user] = useAtom(userAtom);
return (
<div>
<h3>User Profile</h3>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
</div>
);
};
// The main component wraps the async component with Suspense
const UserDataFetcher = () => {
const [userId, setUserId] = useAtom(userIdAtom);
return (
<div>
<h2>Fetch User Data</h2>
<p>Current User ID: {userId}</p>
<button onClick={() => setUserId(id => id + 1)}>Fetch Next User</button>
<Suspense fallback={<p>Loading user...</p>}>
<UserProfile />
</Suspense>
</div>
);
};When userIdAtom changes, userAtom automatically re-fetches the data, and the UserProfile component suspends again until the new data is available. This declarative approach to data fetching is incredibly powerful and simplifies component logic significantly.
Scoping State with Provider
By default, atoms are stored in a global, app-wide store. However, there are cases where you might want to isolate state to a specific part of your component tree. This is useful for building reusable widgets or in micro-frontend architectures. Jotai provides an optional <Provider> component for this purpose.
Any atoms used within a <Provider> will be scoped to that provider. This means you can have multiple instances of the same component using the same atom definitions but maintaining completely separate state values.
<p>const App = () => (<br> <div><br> <h2>Instance A</h2><br> <Provider><br> <Counter /><br> </Provider><br> <h2>Instance B</h2><br> <Provider><br> <Counter /><br> </Provider><br> </div><br>);</p>
In this setup, the two <Counter /> components will have their own independent counts, even though they use the same countAtom definition.
Best Practices, Optimization, and the Jotai Ecosystem
To get the most out of Jotai, it’s important to follow some best practices. As with any powerful tool, understanding its nuances can help prevent common pitfalls and ensure your application remains performant and maintainable. This is especially relevant for developers working with React Native News, where performance on mobile devices is critical.
Best Practices and Common Pitfalls
- Define Atoms Outside Components: Always define your atoms at the module level (outside the component render function). Defining an atom inside a component will create a new atom on every render, leading to unexpected behavior and memory leaks.
- Keep Atoms Small: The core idea is “atomic” state. Prefer many small atoms over a few large ones. If a component only needs one property from a large object atom, consider splitting that object into smaller, more granular atoms.
- Use Derived Atoms for Computed State: Avoid using
useEffectoruseMemoin components to calculate state. Let Jotai’s derived atoms handle this reactively. It’s more efficient and declarative. - Leverage Action Atoms: Encapsulate complex state update logic in write-only or read/write atoms. This separates concerns, makes your components cleaner, and improves testability. You can easily test these atoms in isolation using tools like Jest News favorite, the React Testing Library News.
The Growing Ecosystem
Jotai’s core is minimal, but it is extended by a rich ecosystem of official utility packages. The jotai/utils package is particularly useful, providing pre-built solutions for common problems:
atomWithStorage: Persists an atom’s state tolocalStorageorsessionStorage.atomWithReset: An atom that can be reset to its initial value using a special `RESET` symbol.selectAtom: A utility to create a derived atom that selects a part of another atom’s value, optimizing re-renders.atomFamily: A function to create a family of atoms from a parameter, useful for managing state for dynamic lists of items.
This ecosystem, combined with its inherent flexibility, makes Jotai a fantastic choice for managing all kinds of state, whether it’s for UI elements from libraries like React Native Paper News or complex form logic with React Hook Form News.
Conclusion: The Future of State Management is Minimal
The latest Jotai News and Zustand News confirm a clear trend in the React community: a move away from boilerplate-heavy, monolithic state management towards lighter, more intuitive, and performant solutions. Jotai stands out in this new landscape with its uniquely minimalistic API, powerful atomic model, and seamless integration with React’s latest features like Suspense.
By embracing a bottom-up approach with atoms, Jotai provides a developer experience that feels as simple as useState while offering the power of a global state manager. Its automatic performance optimization, derived state capabilities, and first-class TypeScript support make it a formidable choice for any React or React Native project. Whether you are building a new application with Vite, Next.js, or Expo, or looking to refactor an existing one, Jotai offers a compelling, modern, and flexible way to manage your application’s state. It’s a library that is not just a tool, but a new way of thinking about state in a component-driven world.
