Jotai完全ガイド2025 - Reactステート管理の新スタンダード

import { atom, useAtom } from 'jotai'

// 基本的なatom
const countAtom = atom(0)

// 派生atom（derived atom）
const doubleCountAtom = atom((get) => get(countAtom) * 2)

// コンポーネントでの使用
function Counter() {
const [count, setCount] = useAtom(countAtom)
const [doubleCount] = useAtom(doubleCountAtom)

return (
  <div>
    <p>Count: {count}</p>
    <p>Double: {doubleCount}</p>
    <button onClick={() => setCount(c => c + 1)}>
      Increment
    </button>
  </div>
)
}

import { atom } from 'jotai'

// 非同期データ取得のatom
const userAtom = atom(async (get) => {
const userId = get(userIdAtom)
if (!userId) return null

const response = await fetch(`/api/users/${userId}`)
return response.json()
})

// ローディングステートの管理
const userLoadingAtom = atom((get) => {
try {
  get(userAtom)
  return false
} catch (promise) {
  return true
}
})

function UserProfile() {
const [user] = useAtom(userAtom)
const [loading] = useAtom(userLoadingAtom)

if (loading) return <div>Loading...</div>
if (!user) return <div>No user found</div>

return (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
)
}

import { atom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// LocalStorageに自動保存されるatom
const themeAtom = atomWithStorage('theme', 'light')

// SessionStorageを使用
const tempDataAtom = atomWithStorage('tempData', {}, sessionStorage)

function ThemeToggle() {
const [theme, setTheme] = useAtom(themeAtom)

return (
  <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
    Current theme: {theme}
  </button>
)
}

import { atom } from 'jotai'

const postsAtom = atom([])

const addPostAtom = atom(
null,
async (get, set, newPost) => {
  // 楽観的更新：即座にUIを更新
  const currentPosts = get(postsAtom)
  const optimisticPost = { ...newPost, id: Date.now(), pending: true }
  set(postsAtom, [...currentPosts, optimisticPost])

  try {
    // サーバーに送信
    const response = await fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(newPost),
      headers: { 'Content-Type': 'application/json' }
    })
    const savedPost = await response.json()

    // 成功時：楽観的更新を実際のデータで置換
    set(postsAtom, prev => 
      prev.map(post => 
        post.id === optimisticPost.id ? savedPost : post
      )
    )
  } catch (error) {
    // 失敗時：楽観的更新を削除
    set(postsAtom, prev => 
      prev.filter(post => post.id !== optimisticPost.id)
    )
    throw error
  }
}
)

import { Suspense } from 'react'
import { atom, useAtom } from 'jotai'

const asyncDataAtom = atom(async () => {
const response = await fetch('/api/data')
return response.json()
})

function DataComponent() {
const [data] = useAtom(asyncDataAtom)
return <div>{JSON.stringify(data)}</div>
}

function App() {
return (
  <Suspense fallback={<div>Loading...</div>}>
    <DataComponent />
  </Suspense>
)
}