依存配列を正しく書く — exhaustive-depsの読み方

const [count, setCount] = useState(0);
const [name, setName] = useState('Alice');
 
// 警告: React Hook useEffect has a missing dependency: 'name'
useEffect(() => {
  console.log(`${name} のカウント: ${count}`);
}, [count]); // nameが抜けている

function ChatRoom({ roomId }: { roomId: string }) {
  const [message, setMessage] = useState('');
 
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('message', (msg) => {
      // この message は、エフェクトが実行された時点の値で固定される
      console.log(`[${roomId}] 受信: ${msg}, 入力中: ${message}`);
    });
    connection.connect();
 
    return () => connection.disconnect();
  }, [roomId]); // ← messageが依存配列に入っていない
 
  return <input value={message} onChange={(e) => setMessage(e.target.value)} />;
}

function createCounter() {
  let count = 0;
  return () => {
    count++;
    return count;
  };
}
 
const counter = createCounter();
counter(); // 1
counter(); // 2 — 関数が count を覚えている

function SearchResults({ query }: { query: string }) {
  // コンポーネント内で定義した関数
  const fetchResults = () => {
    return fetch(`/api/search?q=${query}`);
  };
 
  // 警告: 'fetchResults' が依存配列に入っていない
  useEffect(() => {
    fetchResults().then(/* ... */);
  }, [query]); // fetchResultsも入れるべき？
}

function SearchResults({ query }: { query: string }) {
  useEffect(() => {
    // 関数をエフェクト内で定義すれば、依存配列に入れる必要がない
    const fetchResults = () => {
      return fetch(`/api/search?q=${query}`);
    };
 
    fetchResults().then(/* ... */);
  }, [query]); // queryだけ依存すればよい
}

// NG — countを依存配列に入れると毎カウントでエフェクト再実行
useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1); // countに依存
  }, 1000);
  return () => clearInterval(id);
}, [count]); // カウントが変わるたびにタイマーを作り直す
 
// OK — updater functionで前のstateを参照する
useEffect(() => {
  const id = setInterval(() => {
    setCount((prev) => prev + 1); // countに依存しない
  }, 1000);
  return () => clearInterval(id);
}, []); // 依存配列が空 → タイマーは1回だけ作られる

function SearchResults({ query }: { query: string }) {
  // useCallbackで関数の参照を安定させる
  const fetchResults = useCallback(() => {
    return fetch(`/api/search?q=${query}`);
  }, [query]);
 
  useEffect(() => {
    fetchResults().then(/* ... */);
  }, [fetchResults]); // fetchResultsはqueryが変わったときだけ新しくなる
}

function UserList({ filters }: { filters: { status: string } }) {
  // このオブジェクトはレンダーのたびに新しく生成される
  const params = { status: filters.status, limit: 10 };
 
  useEffect(() => {
    fetchUsers(params).then(setUsers);
  }, [params]); // 毎回新しいオブジェクト → 毎回エフェクト実行
}

// 対処A: プリミティブ値を直接依存配列に入れる
useEffect(() => {
  fetchUsers({ status: filters.status, limit: 10 }).then(setUsers);
}, [filters.status]); // 文字列なので値で比較される
 
// 対処B: useMemoでオブジェクトをメモ化する
const params = useMemo(() => ({ status: filters.status, limit: 10 }), [filters.status]);
useEffect(() => {
  fetchUsers(params).then(setUsers);
}, [params]);

// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
  // ...
}, []);