■目次

1. コンポーネント

• コンポーネント自体をmemo化したか

  → memo（React.memo）を使ってレンダリングを最適化する【コンポーネントに適用】

• コンポーネント自体に型を定義したか（FC）

• コンポーネント分割は最適か（Atomic Design等、コンポーネント分割のルールに合っているか）

2. props

• propsで渡す関数はuseCallbackで囲ったか

  → useCallbackを使ってレンダリングを最適化する【関数に適用】

  <aside> ⚠️ 外部データとのやりとりを記述している関数は、useCallbackで囲うとうまく処理が走らなくなる可能性大！

  </aside>

• input要素の場合、入力値更新用の関数で、引数のeに対して型定義をしたか

  （e: ChangeEvent<HTMLInputElement>）

3. 状態管理（state）

3-1. useState

• useStateに型を定義したか（useState<>()）
  • ただし、初期値から型推論できる場合は定義しなくてもよい
    • ("") だとstringと判断してくれる

3-2. Transition

• 緊急性の低い更新関数をstartTransitionでラップしたか

  → Transition【startTransition / useTransition / useDeferredValue】

3-3. Context

• Contextを使っている場合、Contextを参照しているコンポーネントの子コンポーネントはmemo化しているか（不要な再レンダリングが起きないようにしているか）

  → ☆ 再レンダリングの最適化

4. 外部データ取得【Suspense / axios / Suspense × Transition】

4-1. Suspense・ErrorBoundary

• Suspenseコンポーネント、ErrorBoundaryコンポーネントでラップしたか

  → Suspense × データ取得【React Query(TanStack) / SWR(Vercel)】

• ローディング中、エラー時に表示するコンポーネントを用意したか / fallbackにセットしたか