React DevTools

各ブラウザの拡張機能ストアから「React Developer Tools」を検索してインストールします。

// Chrome の場合
// Chrome ウェブストア → "React Developer Tools" を検索 → 追加

// Firefox の場合
// Firefox アドオン → "React Developer Tools" を検索 → 追加

// インストール後、React アプリが動作しているページを開くと
// 開発者ツール（F12）に "Components" と "Profiler" タブが表示されます

DevTools で確認しやすいように、カウンターアプリを実装した例です。Components タブで count の state 値や step props がリアルタイムに変化する様子を観察できます。

// Counter コンポーネント
// DevTools の Components タブで props と state を確認できます
function Counter({ label, step }) {
  // useState の値は DevTools の "hooks" セクションに表示されます
  const [count, setCount] = React.useState(0);

  // クリックするたびに step 分だけカウントアップします
  function handleIncrement() {
    setCount(function(prev) {
      return prev + step;
    });
  }

  // クリックするたびに step 分だけカウントダウンします
  function handleDecrement() {
    setCount(function(prev) {
      return prev - step;
    });
  }

  // カウンターをゼロにリセットします
  function handleReset() {
    setCount(0);
  }

  return (
    <div style={{ margin: '16px', padding: '16px', border: '1px solid #ccc', borderRadius: '8px' }}>
      {/* label props は DevTools の "props" セクションで確認できます */}
      <h3>{label}</h3>

      {/* count state は DevTools の "hooks" セクションで確認できます */}
      <p style={{ fontSize: '24px', fontWeight: 'bold' }}>カウント: {count}</p>

      <button onClick={handleDecrement}>-{step}</button>
      <button onClick={handleReset} style={{ margin: '0 8px' }}>リセット</button>
      <button onClick={handleIncrement}>+{step}</button>
    </div>
  );
}

// App コンポーネント（ルートコンポーネント）
// DevTools のツリーで App > Counter という階層が確認できます
function App() {
  return (
    <div>
      <h2>React DevTools デモ</h2>

      {/* step=1 の Counter。DevTools で props を確認できます */}
      <Counter label="ステップ1のカウンター" step={1} />

      {/* step=5 の Counter。同じコンポーネントでも props が異なることを確認できます */}
      <Counter label="ステップ5のカウンター" step={5} />
    </div>
  );
}

export default App;

Profiler タブを使うと、どのコンポーネントがいつ・どのくらいの時間でレンダリングされたかを計測できます。

// Profiler API を使ったプログラム的な計測も可能です
// DevTools の Profiler タブと組み合わせて使うとさらに詳細な分析ができます
import { Profiler } from 'react';

// onRender コールバックでレンダリング情報を受け取ります
function onRenderCallback(
  id,            // Profiler の id 属性（"App" など）
  phase,         // "mount"（初回）または "update"（再レンダリング）
  actualDuration // 実際にレンダリングにかかった時間（ミリ秒）
) {
  // コンソールにレンダリング時間を出力します
  console.log('[Profiler] id=' + id + ' phase=' + phase + ' duration=' + actualDuration + 'ms');
}

function App() {
  return (
    // Profiler コンポーネントで計測対象をラップします
    <Profiler id="App" onRender={onRenderCallback}>
      <Counter label="プロファイル計測対象" step={1} />
    </Profiler>
  );
}

export default App;

React DevTools は『React』アプリ開発において必須とも言えるデバッグツールです。Components タブではコンポーネントの階層・props・state・context をリアルタイムで確認でき、DevTools 上から値を直接編集して UI への影響を即座に確認することもできます。

Profiler タブでは、レンダリングのパフォーマンス問題を特定できます。どのコンポーネントが不必要に再レンダリングされているかを把握し、React.memo や useCallback・useMemo による最適化の効果を測定するために活用できます。

本番ビルドでは React DevTools の詳細情報は表示されません。開発ビルド（npm start など）で使用することを前提としています。なお、StrictMode を有効にすると意図的に二重レンダリングが発生しますが、DevTools の Profiler ではこの二重分は除外して表示されます。

関連ページ: React.memo / useCallback / useMemo / StrictMode

本番ビルドではコンポーネントの詳細情報が表示されず困惑する

React DevTools のコンポーネントツリーとプロファイラーは、開発ビルド（react.development.js）でのみ完全な情報を提供します。本番ビルドではパフォーマンス最適化のためにデバッグ情報が削除されているため、コンポーネント名が Anonymous になったり、一部の情報が表示されなかったりします。デバッグは開発環境で行います。

StrictMode による二重レンダリングをバグと誤認する

React 18 の開発モードでは StrictMode が有効な場合、コンポーネントが意図的に2回レンダリングされます。これはサイドエフェクトのバグを早期検出するための仕様であり、本番ビルドでは発生しません。DevTools のコンポーネントツリーでレンダリング回数が多く見えても、それが StrictMode によるものかどうかを確認します。

コンポーネント名が表示されず Anonymous になる

アロー関数や無名関数でコンポーネントを定義すると、React DevTools でコンポーネント名が Anonymous と表示されることがあります。デバッグを容易にするために、コンポーネントには名前付き関数を使うか、変数に代入してエクスポートします。

anonymous_ng.jsx

// 無名関数のため DevTools で Anonymous と表示される
export default function() {
  return <p>桐生一馬のページ</p>;
}

修正後:

anonymous_ok.jsx

// 関数名を付けることで DevTools でコンポーネント名が表示される
export default function KiryuPage() {
  return <p>桐生一馬のページ</p>;
}