【入門編】 eslint-plugin-react-hooksの依存配列ルール – React実践ガイド

やあ、こんにちは。Reactの世界へようこそ。
フロントエンドの荒波に揉まれていると、必ず一度は「あ、これ何で動かないの？」「また`useEffect`で無限ループしちゃったよ…」と頭を抱える夜があるはずだ。大丈夫、君だけじゃない。世界中のエンジニアが同じ壁にぶつかってきたんだ。

今日は、その中でも特に初心者が沼にハマりやすい「依存配列（Dependency Array）」のルールについて、コーヒーでも飲みながらゆっくり話そうか。

—

Reactの`useEffect`は、「何かが起きたら、これをしてね」という命令を出すための道具だ。

想像してみてほしい。君がキッチンで料理をしているとしよう。
「お湯が沸騰したら（きっかけ）、パスタを茹でる（アクション）」というルールを作ったとする。この「お湯が沸騰したら」という条件を指定するのが、`useEffect`の最後にある`[]`、つまり依存配列なんだ。

もしこの配列を空っぽにしたり、適当に省略したりすると、Reactは「いつ動けばいいのか分からない！」とパニックになるか、逆に「とにかく全部のタイミングで動け！」と暴走し始める。

開発中にエディタで「おい、依存配列に入れ忘れてるぞ！」と警告が出ることはないかな？あれは`eslint-plugin-react-hooks`という、僕らを守ってくれる頼もしい用心棒だ。

このルールは「中で使っている値は、全部依存配列の中に書き込みなさい」と言っている。これを無視して無理やり`[]`を空にするのは、「お湯が沸騰したかどうかを確認せずに、ずっとパスタを茹で続ける」ようなものなんだ。結果は…目に見えているよね。

—

初学者の頃は「面倒だから空にしておこう」とか「警告がうるさいから無視しよう」と思うかもしれない。でも、それは「情報の食い違い」を生む一番の原因になるんだ。

例えば、ユーザーのIDが変わったのに、プロフィール画面が更新されないバグ。これは大抵、依存配列に`userId`を入れ忘れていることが原因だ。Reactは「君が配列に書いたものだけを見て判断する」という約束事があるから、そこに書かない限り、外の世界の変化を無視し続けてしまうんだよ。

—

具体例を見てみよう。ユーザーIDを受け取って、その人の名前を表示するコンポーネントだ。

import React, { useState, useEffect } from ‘react’;

function UserProfile({ userId }) {
const [userName, setUserName] = useState(”);

useEffect(() => {
// ユーザーIDが変わるたびに、名前をフェッチ（取得）する
console.log(“ユーザー情報を取得します”);

// ここで userId を使っているから、依存配列に必ず入れる必要がある！
// もしここを [] にすると、初回しか取得されず、IDが変わっても名前が古いままになる
}, [userId]);

return

ユーザー名: {userName}

;
}

このコードなら、`userId`が「1」から「2」に変わった瞬間、Reactは「あ、配列の中身が変わった！じゃあまた`useEffect`を実行しなきゃ」と正しく気づいてくれる。これが「同期」というReactの魔法の正体だ。

—

もちろん、例外はある。例えば「コンポーネントが画面に表示された最初の一回だけ動かしたい」というケースだ。

そんな時は、依存配列を空`[]`にしてもいい。ただし、これは「この中では外の変数を一切使っていません」という意思表示だ。もしその中で状態（State）やPropsを使っているなら、それは設計を見直すサインかもしれないね。

もし関数を依存配列に入れて、無限ループが止まらなくなったら…その時は`useCallback`という道具の出番だ。関数を「固定」してあげることで、無駄な再実行を防げるんだよ。

—

最初は警告が出るたびにドキッとするかもしれない。でも、それはReactが君に「今のコード、ちょっと危ないよ、一緒に直そう？」と優しく手を差し伸べてくれている証拠なんだ。

「 exhaustive-deps（依存配列の網羅）」は、ただのルールじゃない。君が書いたコードを、未来の君自身が「あれ、これどういう仕組みだっけ？」と読み返したときに、ちゃんと意図通りに動くように支えてくれる「安心の保険」なんだよ。

焦らなくて大丈夫。まずは警告を素直に受け入れて、依存配列に値を入れてみる。それだけで、君の書くコードはグッとプロの領域に近づくはずだ。

また困ったことがあったら、いつでも聞いてくれ。一緒に最高のアドベンチャーを続けよう！