React DevToolsのHooksパネルを使いこなす：フックの状態とパフォーマンスを分析
2024-07-27
React DevTools のフック番号解説
フック番号
各フックには、そのフックがコンポーネント内で使用されている順序を示す番号が割り当てられます。この番号は、React DevTools の "Hooks" パネルと "Profiler" パネルで使用されます。
フック番号の意味
フック番号は以下の情報を表します。
- ...
- 3: 3番目のフック
- 1: 最初のフック
以下の例では、MyComponent コンポーネントが 2 つのフックを使用しています。
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState("John Doe");
return (
<div>
<h1>Count: {count}</h1>
<h1>Name: {name}</h1>
</div>
);
}
この場合、useState フックは 2 回使用されているため、2 つのフック番号が表示されます。
- 2:
name状態変数を管理するuseStateフック
フック番号は、以下の用途に使用できます。
- 特定のフックのパフォーマンスを分析する: "Profiler" パネルで特定のフック番号を選択すると、そのフックの実行時間などが詳細に表示されます。
- 特定のフックの状態をデバッグする: "Hooks" パネルで特定のフック番号を選択すると、そのフックの状態が詳細に表示されます。
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState("John Doe");
return (
<div>
<h1>Count: {count}</h1>
<h1>Name: {name}</h1>
</div>
);
}
このコードを実行すると、React DevTools の "Hooks" パネルに以下の情報が表示されます。
- React DevTools を開きます。
- "Components" パネルで、フック番号を確認したいコンポーネントを選択します。
- "Hooks" パネルに切り替えます。
- 各フックの左側に表示されている番号を確認します。
Chrome DevTools
- "Sources" タブに切り替えます。
- 該当するコンポーネントのファイルを開きます。
- "Debugger" パネルに切り替えます。
- ブレークポイントを設定します。
- ブレークポイントにヒットしたら、
useStateフックの呼び出し箇所を探します。 - 呼び出し箇所の行番号を確認します。
コードから直接確認
useStateフックの呼び出し箇所を探します。
注意事項
- フック番号は、React のバージョンによって異なる場合があります。
- フック番号は、コンポーネントのコードが変更されるたびに変わることがあります。
reactjs react-devtools
