React

Reactアプリのパフォーマンス改善方法まとめ

Reactはコンポーネントベースで開発がしやすく、生産性の高いフレームワークですが、大規模なアプリケーションになるとパフォーマンスが課題になることがあります。 レンダリングが遅い、UIがもたつく、不要な再描画が発生する…こういった問題はユーザー体験を大きく損ないます。 この記事では、Reactアプリのパフォーマンス改善の基本的な手法と実務で使えるテクニックを紹介します。

#1. 不要な再レンダリングを防ぐ

1-1. React.memo の活用

コンポーネントが同じpropsで再描画されるのを防ぎます。

const UserCard = React.memo(({ user }) => {
  console.log('UserCard rendered');
  return <div>{user.name}</div>;
});
  • ポイント: 親コンポーネントが再レンダリングされても、propsが変わらなければ再描画されません。

1-2. useCallback と useMemo の活用

useCallback

関数が毎回再生成されるのを防ぎます。

const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

useMemo

計算結果をメモ化して、不要な再計算を避けます。

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(data);
}, [data]);

💡 ポイント: 小さすぎる関数や計算には使わない。必要な部分だけに絞る。

#2. リストレンダリングの最適化

2-1. key を正しく指定

{users.map(user => (
  <UserCard key={user.id} user={user} />
))}
  • 不適切な index をkeyに使うと、要素の再描画が無駄に発生します。

2-2. 仮想化 (Virtualization)

大量のリストを描画する場合、画面に表示される部分だけレンダリングします。

import { FixedSizeList as List } from 'react-window';

<Listheight={500}
  itemCount={users.length}
  itemSize={50}
  width={300}
>
  {({ index, style }) => <UserCard user={users[index]} style={style} />}
</List>

#3. コンポーネント分割とLazy Loading

3-1. コンポーネント分割

大きなコンポーネントは小さく分割して、必要な部分だけ再描画されるようにします。

3-2. React.lazy と Suspense

ルートや重いコンポーネントを遅延読み込みできます。

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}
  • 初期ロードを軽くして、UXを改善できます。

#4. 状態管理の最適化

4-1. 状態の局所化

  • 不要に親コンポーネントで状態を持つと、子コンポーネントが再レンダリングされやすくなります。
  • 状態は必要なコンポーネントの近くに置く。
// NG
function Parent() {
  const [count, setCount] = useState(0);
  return <><Child1 count={count} />
    <Child2 count={count} />
  </>;
}

// OK
function Parent() {
  return <><Child1 />
    <Child2 />
  </>;
}

4-2. グローバル状態管理の見直し

  • ReduxやContextで状態が広範囲に渡ると、再レンダリングが増える場合があります。
  • Recoilやzustandなど軽量ライブラリも検討。

#5. レンダリングのプロファイリング

Reactには Profiler があります。

import { Profiler } from 'react';

<Profiler id="App" onRender={(id, phase, actualDuration) => {
  console.log({ id, phase, actualDuration });
}}>
  <App />
</Profiler>
  • レンダリングにかかっている時間を測定
  • ボトルネックの特定に便利

#6. 画像・リソースの最適化

  • 遅延読み込み（Lazy loading）で初期ロードを軽く
<img src="image.jpg" loading="lazy" alt="sample" />
  • WebPや圧縮画像を使う
  • 不要なライブラリ・CSSを削除する

#7. まとめ

Reactパフォーマンス改善のポイントは大きく分けて3つです。

  1. 再レンダリングを減らす

    → React.memo / useMemo / useCallback / 適切なkey

  2. 重い処理や大規模リストを最適化する

    → Virtualization / Lazy Loading

  3. 状態管理・リソースを見直す

    → 局所化・軽量化 / 画像最適化

💡 ポイント

  • 最初からすべて最適化する必要はない
  • ProfilerやChrome DevToolsでボトルネックを測定して、必要な部分だけ改善することが効率的です。

タグ一覧