無限ループを止めろ

中段 / 目安 25分

琥珀さんが自分のノートPCを開いて、耳を近づけてきます。「新着ウィジェットを開くとPCのファンが唸るんだ。ネットワークタブを見て……APIが毎秒何十回も呼ばれてる!」。

画面そのものは正常に見えます。新着のお知らせは3件ちゃんと並んでいます。ところが className が calls の段落に出ている通信回数が、放っておくだけでどんどん増えていきます。誰も何も押していないのに、です。

これは useEffect の依存配列 の呪いです。useEffect の第2引数に渡した配列は「この中身が前回と変わっていたら、もう一度実行する」という指定です。React はその中身を1つずつ、Object.is に近い同一性で見比べます。数や文字なら中身が同じなら同じものとして扱われますが、オブジェクトや配列は違います。

見た目がまったく同じでも、別々に作られたオブジェクトは別物です。そしてコンポーネントの本体で const options = { sort: "new" }; と書くと、描画のたびに新しいオブジェクトが作られます。つまり依存配列の中身は毎回「変わった」と判定されます。

ここに、効果の中で state を更新する処理が入ると輪が閉じます。効果が走る、state が変わる、描き直される、新しいオブジェクトができる、依存が変わったと判定される、効果がまた走る。止まりません。これが無限ループです。

今回のコードには前任者が入れた非常ブレーキが付いていて、20回で止まるようになっています。おかげでブラウザは落ちませんが、20回呼ばれている時点で立派な呪いです。

直し方を考えるときの問いは1つです。この効果は、本当に何かが変われば呼び直すべきものなのか。 今回は「開いたときに1回だけお知らせを取ってくる」だけなので、変化に反応する必要はまったくありません。依存が空なら、効果は最初の1回しか走りません。

もし本当に何かに反応させたい場合でも、渡すのはオブジェクトそのものではなく、その中の文字や数にします。[options] ではなく [options.sort] です。同一性ではなく値で比べられるものだけを依存に置く、と覚えておいてください。

完成条件

• 画面を開いてしばらく置いても、className が calls の段落が「通信 1 回」のまま増えない
• 新着のお知らせは今までどおり className が item の要素として3件並ぶ
• useEffect の依存配列に、描画のたびに作り直されるオブジェクトを渡さない
• className が settled の段落に出る「1.5秒後の通信回数」が 1 になる

進め方

まず、効果の先頭に console.log を1行入れて、何回走っているかを自分の目で数えてください。1回で止まらないことが確認できたら、次は「なぜもう一度走ったのか」です。依存配列に並んでいるものを1つずつ、それは前回と同じものか と問い直します。

画面には前任者が付けた見張りが2つ残っています。呼びすぎを止める LIMIT と、開いて1.5秒たった時点の通信回数を書き留める settled です。どちらも呪いではなく安全装置なので、触らずに残してください。ブレーキを外して呪いが消えたように見せるのは供養ではなく、隠蔽です。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

供養が済むと、琥珀さんは耳をすませてこう言います。「ファンが……静かに……(会社が救われた音)」。