const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, [count]);  // ← countを更新してまた発火
  return <div>{count}</div>;
};

@Reviewer: 状態の更新により依存配列の値が変化し、useEffectが再実行されるループ構造です。明示的な停止条件がないため、無限再レンダリングが発生します。

const MyComponent = ({ value }: { value: number }) => {
  const [internal, setInternal] = useState(value);

  useEffect(() => {
    setInternal(value);
  }, [value]);

  return <div>{internal}</div>;
};

@Reviewer: propsをstateにコピーする構造は原則避けるべきです。直接propsを使う、またはuseMemoでの変換処理を検討してください。

const MyComponent = ({ value }: { value: number }) => {
  const formatted = useMemo(() => value * 100, [value]);
  return <div>{formatted}</div>;
};

@Reviewer: propsの値を状態に変換せず、memo化された変数として扱うことで、再レンダリングと更新の関係が明示的になっています。

useEffect(() => {
  fetch("/api/count")
    .then(res => res.json())
    .then(data => setCount(data.count));
}, [count]); // ← 状態が変わるたびにfetch発火

@Reviewer: 状態`count`が変わるたびにAPIが再実行される構造です。初回のみ取得したい場合は依存配列を`[]`にするか、明示的な条件を入れてください。

useEffect(() => {
  fetch("/api/count")
    .then(res => res.json())
    .then(data => setCount(data.count));
}, []); // 初回のみ実行