Reactパフォーマンス改善で実務で確認したい原因と優先順位

遅い画面はまず計測して原因を分ける

React パフォーマンス 改善で最初に避けたいのは、原因を確認せずにReact.memoやuseMemoを追加することです。

結論から言うと、実務では「計測」「状態設計」「再レンダリング範囲」「重い計算」「通信や描画以外の待ち時間」の順に確認します。

memo化は有効な手段です。ただし、ボトルネックが別にある場合は、コードが複雑になるだけで体感速度は変わりません。

Reactパフォーマンス改善の優先順位

優先	確認内容	見るポイント
1	計測	どの操作が遅いかを特定する
2	状態設計	不要に広い範囲が更新されていないか
3	再レンダリング	propsやContextで連鎖していないか
4	重い計算	filter、sort、集計が毎回走っていないか
5	memo化	効果が測れる箇所に限定する

計測にはReact Profilerが使えます。まず、遅い操作と再レンダリングされるコンポーネントを確認します。

失敗例：memoを足しても遅いまま

次のように、親コンポーネントで毎回新しい配列を作ると、子コンポーネントのmemoが効きにくくなります。

const UserList = memo(function UserList({ users }: { users: User[] }) {
  return users.map((user) => <UserRow key={user.id} user={user} />);
});

function Page({ allUsers, keyword }: Props) {
  const filteredUsers = allUsers.filter((user) =>
    user.name.includes(keyword)
  );

  return <UserList users={filteredUsers} />;
}

UserListをmemoで包んでも、filteredUsersは毎回新しい参照です。結果として、期待したほど再レンダリングを抑えられないことがあります。

改善例：重い計算をuseMemoで囲む

function Page({ allUsers, keyword }: Props) {
  const filteredUsers = useMemo(() => {
    return allUsers.filter((user) => user.name.includes(keyword));
  }, [allUsers, keyword]);

  return <UserList users={filteredUsers} />;
}

useMemoは、計算結果を再利用したいときに使います。React公式のuseMemoリファレンスにもある通り、すべての計算へ機械的に入れるものではありません。

状態管理を見直すと改善することが多い

Reactの遅さは、memo不足より状態の持ち方が原因のことがあります。親に置いたstateが広い範囲を巻き込むと、関係ない子まで再レンダリングします。

• 入力中のstateをページ全体に持たせていないか
• Contextに頻繁に変わる値をまとめすぎていないか
• 一覧全体ではなく行単位で状態を持てないか
• サーバーデータとUIローカル状態が混ざっていないか

React.memoはReact公式のmemoリファレンスでも説明されています。ただし、memo化より前に状態の配置を見直す方が、根本的な改善になることがあります。

useCallbackは子の再レンダリング対策だけで使わない

useCallbackは関数参照を安定させます。しかし、子コンポーネントがmemo化されていない場合、効果が見えにくいです。

• memo化された子に関数を渡しているか
• 依存配列が増えすぎて読みにくくなっていないか
• 関数を安定させるより、コンポーネント分割が有効ではないか
• イベントハンドラ内で最新stateを参照できているか

useCallbackは便利ですが、過剰に使うとレビュー時に依存関係を追う負担が増えます。効果がある箇所へ限定するのが現実的です。

レビューで確認したいチェックリスト

• Profilerなどで遅い箇所を確認しているか
• 状態の配置が広すぎないか
• Contextの更新で不要な再レンダリングが起きていないか
• React.memo、useMemo、useCallbackの目的がコメントなしでも読めるか
• 大きな一覧やテーブルで仮想化が必要ではないか
• 通信、画像、CSS、ブラウザ処理も含めて原因を分けているか

まとめ：Reactパフォーマンス改善は測ってから直す

React パフォーマンス 改善では、memo化を最初の答えにしないことが大切です。まず計測し、状態設計と再レンダリング範囲を確認します。

useMemoやuseCallbackは、効果が見える場所で使うと強力です。一方で、原因を見ないまま増やすと、保守性を下げることがあります。

React案件では、パフォーマンス改善、状態管理、レビューの経験が現場で評価されます。今の経験を活かせるフロントエンド案件や、改善に取り組める環境を探している方は、技術的な希望も含めて一度相談してください。