jotaiで学ぶReact Suspense時代の状態管理：非同期データ取得とエラーハンドリングの実装パターン

import { atom, useAtom } from 'jotai'

// アトムの定義（プリミティブな値）
const countAtom = atom(0)

// 派生アトム（他のアトムから計算）
const doubleCountAtom = atom((get) => get(countAtom) * 2)

// コンポーネントでの使用
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  )
}

import { atom, useAtom } from 'jotai'

// ユーザーデータを取得する非同期アトム
const userAtom = atom(async () => {
  const response = await fetch('/api/user')
  if (!response.ok) throw new Error('Failed to fetch user')
  return response.json()
})

// Suspense境界内で使用
function UserProfile() {
  const [user] = useAtom(userAtom)
  // userは必ず解決済みの値
  return <div>Welcome, {user.name}</div>
}

// 親コンポーネントでSuspenseをラップ
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  )
}

import { ErrorBoundary } from 'react-error-boundary'

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>エラーが発生しました: {error.message}</p>
      <button onClick={resetErrorBoundary}>再試行</button>
    </div>
  )
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // リセット時の処理（キャッシュクリアなど）
      }}
    >
      <Suspense fallback={<div>Loading...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  )
}

import { atom, useAtom, useSetAtom } from 'jotai'

// リフレッシュ用のトリガーアトム
const refreshTriggerAtom = atom(0)

// データ取得アトム（トリガーに依存）
const dataAtom = atom(async (get) => {
  get(refreshTriggerAtom) // 依存関係を作成
  const response = await fetch('/api/data')
  if (!response.ok) throw new Error('Network error')
  return response.json()
})

// リフレッシュ関数を使用するコンポーネント
function DataDisplay() {
  const [data] = useAtom(dataAtom)
  const refresh = useSetAtom(refreshTriggerAtom)

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={() => refresh(n => n + 1)}>
        データを再取得
      </button>
    </div>
  )
}

// atoms/user.ts - 機能ごとにファイルを分割
import { atom } from 'jotai'
import { atomWithStorage } from 'jotai/utils'

// プリミティブアトムには〜Atomサフィックス
export const userIdAtom = atom<string | null>(null)

// 永続化が必要なアトムにはatomWithStorageを使用
export const themeAtom = atomWithStorage('theme', 'light')

// 派生アトムには〜DerivedAtomサフィックス
export const isLoggedInDerivedAtom = atom(
  (get) => get(userIdAtom) !== null
)

// 非同期アトムには〜AsyncAtomサフィックス
export const userDataAsyncAtom = atom(async (get) => {
  const userId = get(userIdAtom)
  if (!userId) return null
  const response = await fetch(`/api/users/${userId}`)
  return response.json()
})

import { render, screen } from '@testing-library/react'
import { Provider } from 'jotai'
import { useHydrateAtoms } from 'jotai/utils'

// テスト用のHydrateコンポーネント
function HydrateAtoms({ initialValues, children }) {
  useHydrateAtoms(initialValues)
  return children
}

test('ユーザー名が表示される', () => {
  render(
    <Provider>
      <HydrateAtoms initialValues={[[userAtom, { name: 'テストユーザー' }]]}>
        <UserProfile />
      </HydrateAtoms>
    </Provider>
  )
  expect(screen.getByText('Welcome, テストユーザー')).toBeInTheDocument()
})