Jotai 状态管理专家指南：核心模式、性能优化与最佳实践

jotai-expert by s-hiraoku/skills-factory

109 周安装量

GitHub

安装命令

npx skills add https://github.com/s-hiraoku/skills-factory --skill jotai-expert

React 状态管理性能优化

🇨🇳中文介绍

Jotai 专家

Jotai 是一个基于原子化理念、原始且灵活的 React 状态管理库。请始终参考 https://jotai.org/ 以获取最新的 API 详情。

决策树

Need state management?
├── Simple local state → useState (no Jotai needed)
├── Shared state across components
│   ├── Few components, same tree → Context may suffice
│   └── Many components, complex → Use Jotai ✓
└── Global app state → Use Jotai ✓

Choosing atom type:
├── Static value → atom(initialValue)
├── Computed from other atoms → atom((get) => ...)
├── Need to modify other atoms → atom(null, (get, set) => ...)
├── Persist to storage → atomWithStorage()
├── List of items → splitAtom() or atoms-in-atom
└── Parameterized data → atomFamily()

Performance issue?
├── Component re-renders too often
│   ├── Only reading? → useAtomValue
│   ├── Only writing? → useSetAtom
│   ├── Large object? → selectAtom / focusAtom
│   └── List items? → splitAtom
└── Async loading states → loadable() or manual loading atoms

核心模式

Atom 类型

import { atom } from 'jotai'

// 1. Primitive: holds value
const countAtom = atom(0)

// 2. Derived read-only: computed from others
const doubleAtom = atom((get) => get(countAtom) * 2)

// 3. Derived read-write: custom setter
const celsiusAtom = atom(0)
const fahrenheitAtom = atom(
  (get) => get(celsiusAtom) * 9/5 + 32,
  (get, set, newF: number) => set(celsiusAtom, (newF - 32) * 5/9)
)

// 4. Write-only (action): no read value
const incrementAtom = atom(null, (get, set) => {
  set(countAtom, get(countAtom) + 1)
})

🇺🇸English

Jotai Expert

Jotai is a primitive and flexible state management library for React using an atomic approach. Always reference https://jotai.org/ for the latest API details.

Decision Tree

Need state management?
├── Simple local state → useState (no Jotai needed)
├── Shared state across components
│   ├── Few components, same tree → Context may suffice
│   └── Many components, complex → Use Jotai ✓
└── Global app state → Use Jotai ✓

Choosing atom type:
├── Static value → atom(initialValue)
├── Computed from other atoms → atom((get) => ...)
├── Need to modify other atoms → atom(null, (get, set) => ...)
├── Persist to storage → atomWithStorage()
├── List of items → splitAtom() or atoms-in-atom
└── Parameterized data → atomFamily()

Performance issue?
├── Component re-renders too often
│   ├── Only reading? → useAtomValue
│   ├── Only writing? → useSetAtom
│   ├── Large object? → selectAtom / focusAtom
│   └── List items? → splitAtom
└── Async loading states → loadable() or manual loading atoms

Core Patterns

Atom Types

import { atom } from 'jotai'

// 1. Primitive: holds value
const countAtom = atom(0)

// 2. Derived read-only: computed from others
const doubleAtom = atom((get) => get(countAtom) * 2)

// 3. Derived read-write: custom setter
const celsiusAtom = atom(0)
const fahrenheitAtom = atom(
  (get) => get(celsiusAtom) * 9/5 + 32,
  (get, set, newF: number) => set(celsiusAtom, (newF - 32) * 5/9)
)

// 4. Write-only (action): no read value
const incrementAtom = atom(null, (get, set) => {
  set(countAtom, get(countAtom) + 1)
})

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

需求	Hook	变化时重新渲染
仅读取	`useAtomValue(atom)`	是
仅写入	`useSetAtom(atom)`	否
两者都要	`useAtom(atom)`	是

2. 使用 splitAtom 实现高效列表

import { splitAtom } from 'jotai/utils'

const todosAtom = atom<Todo[]>([])
const todoAtomsAtom = splitAtom(todosAtom, (t) => t.id)

function TodoList() {
  const [todoAtoms] = useAtom(todoAtomsAtom)
  return todoAtoms.map((todoAtom) => (
    <TodoItem key={todoAtom.toString()} atom={todoAtom} />
  ))
}

// Each item updates independently
function TodoItem({ atom }) {
  const [todo, setTodo] = useAtom(atom)
  // Changes here don't re-render other items
}

3. 使用 focusAtom 处理大型对象

import { focusAtom } from 'jotai-optics'

const formAtom = atom({ name: '', email: '', address: { city: '' } })

// Focused atoms for each field
const nameAtom = focusAtom(formAtom, (o) => o.prop('name'))
const cityAtom = focusAtom(formAtom, (o) => o.prop('address').prop('city'))

// Each field component only re-renders when its value changes

4. 使用 loadable 处理异步

import { loadable } from 'jotai/utils'

const asyncDataAtom = atom(async () => fetch('/api').then(r => r.json()))
const loadableDataAtom = loadable(asyncDataAtom)

function Component() {
  const data = useAtomValue(loadableDataAtom)
  if (data.state === 'loading') return <Spinner />
  if (data.state === 'hasError') return <Error />
  return <Data value={data.data} />
}

应避免的反模式

在组件中进行繁重计算：应移至 atom 的读取函数或操作中
在渲染过程中创建 atom：应在外部定义或使用 useMemo
在仅需读取/写入时使用 useAtom：应使用 useAtomValue/useSetAtom
过度拆分频繁更新的数据：应批量处理相关的更新
为每个异步 atom 都嵌套 Suspense：应使用策略性边界或 loadable

按主题组织的详细文档：

references/core-api.md：atom、hooks、Store、Provider API 详情
references/utilities.md：atomWithStorage、loadable、splitAtom、selectAtom、atomFamily
references/performance.md：优化策略、渲染控制、大型对象处理
references/patterns.md：组织架构、异步模式、测试、TypeScript、SSR、调试

在实现或审查 Jotai 代码时，请加载相关的参考文件以获取详细指导。

Need	Hook	Re-renders on change
Read only	`useAtomValue(atom)`	Yes
Write only	`useSetAtom(atom)`	No
Both	`useAtom(atom)`	Yes

// ❌ WRONG: Creates new atom every render
function Component() {
  const myAtom = atom(0) // Unstable reference
}

// ✅ CORRECT: Define outside component
const myAtom = atom(0)
function Component() {
  const [value] = useAtom(myAtom)
}

// ✅ CORRECT: useMemo for dynamic atoms
function Component({ id }) {
  const itemAtom = useMemo(() => atom(items[id]), [id])
}

Performance Optimization

1. Granular Subscriptions

// ❌ BAD: Re-renders on any user field change
function UserProfile() {
  const [user] = useAtom(userAtom)
  return <h1>{user.name}</h1>
}

// ✅ GOOD: Only re-renders when name changes
import { selectAtom } from 'jotai/utils'
const nameAtom = selectAtom(userAtom, (u) => u.name)

function UserName() {
  const name = useAtomValue(nameAtom)
  return <h1>{name}</h1>
}

2. Efficient Lists with splitAtom

import { splitAtom } from 'jotai/utils'

const todosAtom = atom<Todo[]>([])
const todoAtomsAtom = splitAtom(todosAtom, (t) => t.id)

function TodoList() {
  const [todoAtoms] = useAtom(todoAtomsAtom)
  return todoAtoms.map((todoAtom) => (
    <TodoItem key={todoAtom.toString()} atom={todoAtom} />
  ))
}

// Each item updates independently
function TodoItem({ atom }) {
  const [todo, setTodo] = useAtom(atom)
  // Changes here don't re-render other items
}

3. Large Objects with focusAtom

import { focusAtom } from 'jotai-optics'

const formAtom = atom({ name: '', email: '', address: { city: '' } })

// Focused atoms for each field
const nameAtom = focusAtom(formAtom, (o) => o.prop('name'))
const cityAtom = focusAtom(formAtom, (o) => o.prop('address').prop('city'))

// Each field component only re-renders when its value changes

4. Async with loadable

import { loadable } from 'jotai/utils'

const asyncDataAtom = atom(async () => fetch('/api').then(r => r.json()))
const loadableDataAtom = loadable(asyncDataAtom)

function Component() {
  const data = useAtomValue(loadableDataAtom)
  if (data.state === 'loading') return <Spinner />
  if (data.state === 'hasError') return <Error />
  return <Data value={data.data} />
}

Anti-Patterns to Avoid

Heavy computation in components : Move to atom read functions or actions
Creating atoms in render : Define outside or use useMemo
Using useAtom when only reading/writing : Use useAtomValue/useSetAtom
Over-fragmenting frequently-updated data : Batch related updates
Nested Suspense for every async atom : Use strategic boundaries or loadable

Detailed documentation organized by topic:

references/core-api.md : atom, hooks, Store, Provider API details
references/utilities.md : atomWithStorage, loadable, splitAtom, selectAtom, atomFamily
references/performance.md : Optimization strategies, render control, large object handling
references/patterns.md : Organization, async patterns, testing, TypeScript, SSR, debugging

When implementing or reviewing Jotai code, load the relevant reference file for detailed guidance.

GSAP 框架集成指南：Vue、Svelte 等框架中 GSAP 动画最佳实践

3,200 周安装

Jotai 状态管理专家指南：核心模式、性能优化与最佳实践

🇨🇳中文介绍

Jotai 专家

决策树

核心模式

Atom 类型

🇺🇸English

Jotai Expert

Decision Tree

Core Patterns

Atom Types

相关 Skills

Hook 选择

引用稳定性

性能优化

1. 细粒度订阅

2. 使用 splitAtom 实现高效列表

3. 使用 focusAtom 处理大型对象

4. 使用 loadable 处理异步

应避免的反模式

参考资料

Hook Selection

Reference Stability