ReactのuseEffectの依存配列で起きる無限ループと古い値の直し方

// 検証用の「検索」。minAge 歳以上の猫の名前を、20ミリ秒後に返す
const CATS = [
  { name: 'たま', age: 3 },
  { name: 'みけ', age: 7 },
  { name: 'くろ', age: 1 },
  { name: 'しろ', age: 5 },
];

export let searchCount = 0;

export function searchCats(query: { minAge: number }): Promise<string[]> {
  searchCount++;
  console.log(`検索 ${searchCount}回目 minAge=${query.minAge}`);
  return new Promise((resolve) =>
    setTimeout(() => resolve(CATS.filter((c) => c.age >= query.minAge).map((c) => c.name)), 20),
  );
}

// 1. 依存配列を書き忘れる
export function CatsNoDeps({ minAge }: { minAge: number }) {
  const [cats, setCats] = useState<string[]>([]);
  useEffect(() => {
    searchCats({ minAge }).then(setCats);
  });
  return <CatList cats={cats} />;
}

--- CatsNoDeps: 開いてから1秒 ---
  検索の回数: 50
  150ms 検索 1回目 minAge=3
  172ms 検索 2回目 minAge=3
  193ms 検索 3回目 minAge=3
  …（中略）
  1172ms 検索 50回目 minAge=3
  表示: たま / みけ / しろ
  console.error: 0件
  2秒の時点の検索の回数: 98

// 2. 描画のたびに作るオブジェクトを、依存配列に入れる
export function CatsObjectDep({ minAge }: { minAge: number }) {
  const [cats, setCats] = useState<string[]>([]);
  const query = { minAge };
  useEffect(() => {
    searchCats(query).then(setCats);
  }, [query]);
  return <CatList cats={cats} />;
}

--- CatsObjectDep: 開いてから1秒 ---
  検索の回数: 50
  138ms 検索 1回目 minAge=3
  161ms 検索 2回目 minAge=3
  182ms 検索 3回目 minAge=3
  …（中略）
  1157ms 検索 50回目 minAge=3
  表示: たま / みけ / しろ
  console.error: 0件
  2秒の時点の検索の回数: 98

// 3. オブジェクトはエフェクトの中で作り、依存配列には数値の minAge を入れる
export function CatsFixed({ minAge }: { minAge: number }) {
  const [cats, setCats] = useState<string[]>([]);
  useEffect(() => {
    const query = { minAge };
    searchCats(query).then(setCats);
  }, [minAge]);
  return <CatList cats={cats} />;
}

--- CatsFixed: 開いてから1秒 ---
  検索の回数: 1
  174ms 検索 1回目 minAge=3
  表示: たま / みけ / しろ
  console.error: 0件
  2秒の時点の検索の回数: 1

// 4. 依存配列に minAge を入れ忘れる
export function CatsMissingDep({ minAge }: { minAge: number }) {
  const [cats, setCats] = useState<string[]>([]);
  useEffect(() => {
    searchCats({ minAge }).then(setCats);
  }, []);
  return <CatList cats={cats} />;
}

--- CatsMissingDep: 開いて、300ミリ秒後に「5歳以上にする」を押す ---
  押す前: minAge: 3 / 表示: たま / みけ / しろ
  押した後: minAge: 5 / 表示: たま / みけ / しろ
  135ms 検索 1回目 minAge=3
  console.error: 0件
--- CatsFixed: 開いて、300ミリ秒後に「5歳以上にする」を押す ---
  押す前: minAge: 3 / 表示: たま / みけ / しろ
  押した後: minAge: 5 / 表示: みけ / しろ
  149ms 検索 1回目 minAge=3
  496ms 検索 2回目 minAge=5
  console.error: 0件

// 5. 空の依存配列のタイマーで、count + 1 を渡す
export function TimerStale() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <p className="count">{count}</p>;
}

// 6. 更新用の関数 c => c + 1 を渡す
export function TimerUpdater() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <p className="count">{count}</p>;
}

--- TimerStale: 開いて0.5秒後から、1秒ごとに表示を読む ---
  0.5秒: 0 / 1.5秒: 1 / 2.5秒: 1 / 3.5秒: 1 / 4.5秒: 1
  console.error: 0件
--- TimerUpdater: 開いて0.5秒後から、1秒ごとに表示を読む ---
  0.5秒: 0 / 1.5秒: 1 / 2.5秒: 2 / 3.5秒: 3 / 4.5秒: 4
  console.error: 0件

import reactHooks from 'eslint-plugin-react-hooks';
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  {
    files: ['src/**/*.tsx'],
    languageOptions: { parser: tseslint.parser },
  },
  reactHooks.configs.flat.recommended,
]);

11:3 warning react-hooks/exhaustive-deps
  React Hook useEffect contains a call to 'setCats'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [minAge] as a second argument to the useEffect Hook.
20:9 warning react-hooks/exhaustive-deps
  The 'query' object makes the dependencies of useEffect Hook (at line 23) change on every render. Move it inside the useEffect callback. Alternatively, wrap the initialization of 'query' in its own useMemo() Hook.
42:6 warning react-hooks/exhaustive-deps
  React Hook useEffect has a missing dependency: 'minAge'. Either include it or remove the dependency array.
54:6 warning react-hooks/exhaustive-deps
  React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array. You can also do a functional update 'setCount(c => ...)' if you only need 'count' in the 'setCount' call.
73:3 warning react-hooks/exhaustive-deps
  React Hook useEffect contains a call to 'setRenders'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [renders] as a second argument to the useEffect Hook.
74:5 error react-hooks/set-state-in-effect
  Error: Calling setState synchronously within an effect can trigger cascading renders

// 7. 依存配列なしで、エフェクトの中ですぐに state を更新する
export function RenderCounter() {
  const [renders, setRenders] = useState(0);
  useEffect(() => {
    setRenders(renders + 1);
  });
  return <p className="count">{renders}</p>;
}

--- RenderCounter: 開いてから1秒 ---
  表示: 17621
  console.error: 338件 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
  2秒の時点の表示: 31928
  2秒の時点の console.error: 613件