Reactの「守護神」を味方につける：`eslint-plugin-react-hooks`があなたのキャリアを救う理由
こんにちは。現場で長年、複雑なフロントエンドアーキテクチャのトラブルシューティングをしてきたエンジニアです。
Reactを書き始めたばかりの頃、`useEffect`や`useCallback`の依存配列に警告が出て、「とりあえず`eslint-disable`で消しておこう」と安易に考えてしまったことはありませんか？実はその行為、時限爆弾をあえて自分のプロダクトに埋め込んでいるのと同義なのです。
今日は、なぜ`eslint-plugin-react-hooks`の推奨ルールが「ただのうるさいお節介」ではなく、「あなたの書くコードの品質を担保する生命線」なのかを、Reactの深淵に触れながら解説します。
—
1. なぜ「依存配列」の警告は無視してはいけないのか？
ReactのHooksは、関数コンポーネントという「一度実行されたら消えるはずの関数」の中で、状態（State）を永続化し、副作用を管理するための魔法です。
クロージャとレンダリングの罠
Reactコンポーネントは、レンダリングのたびに「その瞬間の変数」をキャプチャするクロージャを生成します。もし`useEffect`内で使っている変数が、依存配列（Dependency Array）に含まれていないとどうなるでしょうか？
- 古い情報を握り続ける: コンポーネントが再レンダリングされて変数が更新されても、`useEffect`内の関数は「過去の古い変数」を参照し続けます。
- UIとの乖離: ユーザーが操作した結果と、画面に表示される結果が一致しない「ゴーストバグ」が発生します。
`eslint-plugin-react-hooks`の `exhaustive-deps` ルールは、この「クロージャの罠」を静的解析によって事前に検出し、「おっと、その変数は更新を監視していないと危険だよ」と教えてくれているのです。
—
2. 実践：最強のセットアップ手順
まずは、この守護神をプロジェクトに正しくインストールしましょう。すでにESLintを導入している前提で、以下のコマンドを実行します。
必要なプラグインをインストール
npm install –save-dev eslint-plugin-react-hooks
次に、`.eslintrc.js`（または`eslintrc.json`）で設定を有効化します。ここが最も重要な設定です。
module.exports = {
plugins: [
‘react-hooks’, // プラグインを読み込む
],
rules: {
// Hooksの呼び出し順序が正しいかチェック
‘react-hooks/rules-of-hooks’: ‘error’,
// 依存関係が不足していないかチェック（これが重要！）
‘react-hooks/exhaustive-deps’: ‘warn’,
},
};
なぜ `error` ではなく `warn` なのか？
初心者のうちは、依存関係の解決が難しい場合もあります。まずは `warn` で警告を出しつつ、リファクタリングを促すのが現実的な運用です。しかし、本番環境へのリリース前には、この警告が一つも残っていない状態をチームの品質基準（Definition of Done）にすべきです。
—
3. HelloWorld的動作確認：バグを体感する
あえて警告を出し、それが何を意味するのかを実験してみましょう。以下のコードを貼り付けてみてください。
import React, { useState, useEffect } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
// ESLintはここで「countを依存配列に入れろ」と警告を出すはず
console.log(`現在のカウントは: ${count}`);
}, 1000);
return () => clearInterval(timer);
}, []); // 空の配列を指定して、監視をサボっている状態
return ;
}
このコードの「震える」結末
ブラウザのコンソールを開いてください。ボタンを連打しても、ログは永遠に「現在のカウントは: 0」と表示されます。これが「クロージャによって初期値が閉じ込められた」状態です。
`exhaustive-deps`はこのバグをコードを書いている最中に見抜きます。これを修正するには、依存配列に`[count]`を加えるだけです。そうすれば、`count`が更新されるたびに`useEffect`が再実行され、最新の値を参照できるようになります。
—
4. 最後に：警告は「敵」ではなく「道標」
多くの初心者は、IDEに表示される赤い波線を「消すべき障害物」と捉えます。しかし、熟練のアーキテクトはそれを「Reactの設計思想を理解するための最高の教科書」として利用します。
- 警告が出た？ → 「おっと、私の設計に論理的な矛盾があるんだな」と立ち止まる。
- `eslint-disable`を使いたくなった？ → 「これは依存関係を整理するリファクタリングのチャンスだ」と考える。
この習慣を身につけるだけで、あなたの書くReactコードは、バグが入り込む隙のない堅牢なものへと進化します。今日の作業から、ぜひ「警告を一つずつ丁寧に取り除く」という、プロの習慣を始めてみてください。
あなたの開発体験が、今日から劇的にクリアで楽しいものになることを確信しています。