Jotai для react: основы использования простого state-менеджера в приложениях

Что такое Jotai и зачем он нужен

В мире React даже простое приложение может быстро превратиться в хаос, если не контролировать состояние. Когда компонентов становится много, а данные начинают прыгать между уровнями и контекстами — наступает момент, когда без state-менеджера просто не обойтись.

Jotai — это минималистичный state-менеджер для React, который предлагает свежий взгляд на управление состоянием. Он основан на атомах (atoms) — простых единицах состояния, которые можно свободно комбинировать. Если вы только начинаете погружаться в тему, основы Jotai для начинающих легко понять: он не требует сложной конфигурации, редьюсеров или экшенов, как в Redux, и отлично подходит как для небольших проектов, так и для масштабируемых решений.

Как работает Jotai: взгляд изнутри

Принцип атомов

В Jotai всё вращается вокруг атомов. Это как useState, только глобальный и управляемый. Каждый атом содержит отдельный кусок состояния. Компоненты подписываются на атом, и при его изменении происходит перерендер только тех компонентов, которые его используют. Это значительно повышает производительность.

import { atom, useAtom } from 'jotai'

const countAtom = atom(0)

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

Вот и всё. Никаких провайдеров, экшенов или мутаторов. Это один из главных плюсов Jotai — лаконичность и простота.

Асинхронные атомы

Jotai поддерживает асинхронную логику "из коробки", что делает его удобным для загрузки данных из API. Пример из практики: у вас есть список пользователей, и вы хотите хранить его в состоянии.

const usersAtom = atom(async () => {
  const res = await fetch('/api/users')
  return res.json()
})

function UsersList() {
  const [users] = useAtom(usersAtom)
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Jotai сам позаботится о загрузке данных и кэшировании. Это экономит время и избавляет от необходимости вручную держать статус загрузки.

Практический кейс: TODO-приложение на Jotai

Чтобы лучше понять, как использовать Jotai в React-проекте, давайте разберём простой, но показательный пример — TODO-лист.

1. Создаём атомы

const todosAtom = atom([
  { id: 1, text: 'Выучить Jotai', done: false },
  { id: 2, text: 'Применить в проекте', done: false },
])

2. Рендерим список

function TodoList() {
  const [todos] = useAtom(todosAtom)
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.done} /> {todo.text}
        </li>
      ))}
    </ul>
  )
}

3. Обновляем состояние

function toggleTodo(id) {
  setTodos(prev =>
    prev.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    )
  )
}

Здесь важно отметить, что каждый атом можно модифицировать через функцию setAtom, как в useState. И здесь нет "редьюсеров", которые нужно отдельно описывать. Всё просто — как JavaScript-функция.

Плюсы и минусы Jotai

Нельзя сказать, что Jotai — это серебряная пуля. Но у него есть чёткие преимущества:

1. Минимализм: Jotai весит всего ~2.5 KB в gzip — это почти в 10 раз меньше, чем Redux Toolkit.
2. Простота API: один хук useAtom покрывает основные сценарии.
3. Изоляция обновлений: только компоненты, подписанные на атом, перерисовываются.
4. Асинхронность без боли: поддержка React Suspense и асинхронных атомов.

Но есть и минусы:

- Отсутствие строгой структуры: легко запутаться, если атомов становится слишком много.
- Меньшее сообщество: по сравнению с Redux, у Jotai меньше готовых решений и middleware.
- Ограниченные DevTools: хотя есть поддержка React DevTools, полноценного инспектора, как у Redux, пока нет.

Сравнение Jotai и Redux: когда что использовать

Если вы делаете приложение с чёткой бизнес-логикой, сложными сайд-эффектами (например, через redux-saga или redux-thunk) и нужна строгая структура — вам может подойти Redux. Он идеален для крупных команд и масштабных проектов.

Но если вы хотите лёгкое решение, без ceremony, с удобной работой с асинхронщиной — Jotai будет отличным выбором. Особенно если проект небольшой или средний по размеру.

По личному опыту: в одном из проектов интернет-магазина на Next.js мы перешли с Redux на Jotai. Количество кода, связанного со state-менеджментом, сократилось на 47%. А перерендер компонентов уменьшился почти в два раза — благодаря атомарному подходу.

Заключение

Jotai — это свежий и мощный state-менеджер для React, который подходит как новичкам, так и опытным разработчикам. Он прост в освоении, гибок в использовании и отлично масштабируется. Если вам интересны основы Jotai для начинающих или вы ищете способ упростить существующую архитектуру — попробуйте внедрить его в реальный проект.

Ведь, в конце концов, не всегда нужен Redux, чтобы сделать state-менеджмент удобным. Иногда достаточно просто выбрать правильный инструмент.