ReactのuseEffectで、第2引数の依存配列（[]）が何を意味するのか、いまいち掴めていません。
空配列にする場合、値を入れる場合、そもそも書かない場合で、それぞれどう動きが変わるのでしょうか？たまに無限ループになってしまうのも避けたいです。
依存配列は「この値が変わったら再実行する」というトリガーのリストです。3パターンで整理すると分かりやすいです。
// ① 毎回のレンダー後に実行（省略）
useEffect(() => { ... });
// ② 初回マウント時だけ実行（空配列）
useEffect(() => { ... }, []);
// ③ count が変わったときだけ実行
useEffect(() => { ... }, [count]);無限ループの典型は、effect内で更新したstateを依存配列に入れてしまうケースです。
// NG: setCountでcountが変わる→再実行→また変わる…
useEffect(() => { setCount(count + 1); }, [count]);更新する値は依存に入れない、または関数形式のsetCount(c => c + 1)を使うと防げます。
「effectの中で使っている外部の値は、すべて依存配列に入れる」が原則です。ESLintのexhaustive-depsルールを入れておくと入れ忘れを警告してくれるのでおすすめです。
私も同じところでハマりました。「空配列 = componentDidMount相当」と覚えると最初はスッと入りました。
データ取得(fetch)を初回だけ行いたいなら空配列[]でOKです。クリーンアップが必要ならreturn () => {...}も忘れずに。