不要な再レンダリングを防ぐテクニック
パフォーマンス向上のための基本的な最適化方法
Reactでは、状態の変化やpropsの更新に応じてコンポーネントが再レンダリングされますが、必要のないレンダリングが頻発するとアプリのパフォーマンスに悪影響を与えることがあります。
ここでは、再レンダリングを防ぐ／抑えるための代表的なテクニックを紹介します。
1️⃣ React.memo を使ってコンポーネントの再レンダリングを防ぐ
const MyComponent = React.memo(({ value }) => {
return
<div>{value}</div>
})- 親が再レンダリングされても、propsが変わらない限り子はレンダリングされない。
- デフォルトは浅い比較。複雑なpropsにはカスタム比較関数を使う。
2️⃣ useCallback で関数の再生成を防ぐ
const handleClick = useCallback(() => {
doSomething()
}, [])- 関数が毎回新しく生成されると、
React.memoでも再レンダリングされてしまう。 useCallbackにより同じ参照を維持できる。
3️⃣ useMemo で重い計算の再実行を防ぐ
const sortedList = useMemo(() => {
return heavySort(data)
}, [data])- 計算コストが高い処理をキャッシュして、不要な再評価を防止。
- 状態変化に関係ない式や変数も再生成されるのを抑えられる。
4️⃣ コンポーネント分割による最小レンダリング
// よく変わる部分と変わらない部分を分離
<Header />
<ChangingSection />- 小さく分けて必要な箇所だけ再レンダリングされるようにする。
- 複雑なレイアウトでもパフォーマンスが落ちにくくなる。
5️⃣ Contextの過剰使用を避ける
- Contextの値が変わると、それを購読しているすべてのコンポーネントが再レンダリングされる。
- 必要な粒度で Context を分離、もしくは Zustand などの代替も検討。
✅ 最適化の鉄則
| やること | 理由 |
|---|---|
React.memoで子をラップ |
親の再レンダリングに巻き込まれないようにする |
useCallbackを使う |
propsに渡す関数が毎回再生成されるのを防ぐ |
useMemoで重い処理を抑制 |
再計算を避けることで無駄な再描画を防ぐ |
| 状態管理を局所化 | 状態が変わる範囲を最小限に絞ってレンダリング範囲を限定 |
| コンポーネントを細かく分割 | 最小限の影響範囲で再描画されるよう設計する |
これらの最適化は、特にリストレンダリングや大規模UIで重要になります。過剰最適化に注意しつつ、必要な場面で使いましょう。