依存配列
依存配列は「いつ走るか」の設定
useEffect の2つめの引数を依存配列と呼びます。ここに何を書くかで、effect が走るタイミングが変わります。書き方は3通りあります。
JavaScript (JSX)
useEffect(() => { ... }); // レンダーのたびに毎回
useEffect(() => { ... }, []); // 最初の1回だけ
useEffect(() => { ... }, [likes]); // 最初の1回と、likes が変わったときそれぞれの意味
書かない場合 は、画面が描き直されるたびに毎回走ります。中で state を更新すると、更新でまた描き直しが起きて、また effect が走って、と止まらなくなります。無限ループの典型なので、まず使いません。
空配列 [] は「何にも依存しない」です。マウント時の1回だけ走ります。
[likes] は「likes に依存する」です。マウント時に1回走り、そのあとは likes の値が前回と変わったときだけ走ります。likes が同じままの描き直しでは走りません。
配列には値をいくつでも並べられます。[likes, name] なら、どちらかが変われば走ります。
何を入れるか
判断の基準は単純です。effect の中で使っている値を全部入れる、これだけです。使っているのに入れ忘れると、値が古いまま更新されない不具合になります。入れすぎると必要以上に走ります。
つまずきどころ
「1回だけにしたいから []」と機械的に決めないでください。中で likes を読んでいるのに [] にすると、いつまでも最初の likes を見つづけます。ボタンを押しても表示が変わらない、という形で現れます。
演習
依存配列の違いを、実際に数を数えて確かめます。