Reactのstateが残るか消えるかは位置と種類で決まる

// Counter.tsx
import { useEffect, useState } from 'react';
import { log } from './log';

// クリックした回数を state に持つカウンター
export function Counter({ label }: { label: string }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    log(`マウント（${label}）`);
    return () => log(`アンマウント（${label}）`);
  }, []);

  return (
    <button type="button" className="counter" onClick={() => setCount(count + 1)}>
      {label}：{count}回
    </button>
  );
}

export function SameType() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? <Counter label="派手なカウンター" /> : <Counter label="普通のカウンター" />}
      <button type="button" className="toggle" onClick={() => setIsFancy(!isFancy)}>切り替え</button>
    </div>
  );
}

  [マウント（普通のカウンター）]
  > カウンターを3回クリック
  画面: 普通のカウンター：3回
  > 「切り替え」をクリック（1回目）
  画面: 派手なカウンター：3回
  ボタンの DOM は前と同じ要素か: true
  > 「切り替え」をクリック（2回目）
  画面: 普通のカウンター：3回

export function DifferentType() {
  const [isPaused, setIsPaused] = useState(false);
  return (
    <div>
      {isPaused ? <p>休憩中</p> : <Counter label="カウンター" />}
      <button type="button" className="toggle" onClick={() => setIsPaused(!isPaused)}>切り替え</button>
    </div>
  );
}

  [マウント（カウンター）]
  > カウンターを3回クリック
  画面: カウンター：3回
  > 「切り替え」をクリック（1回目）
  [アンマウント（カウンター）]
  画面: <p>休憩中</p>
  > 「切り替え」をクリック（2回目）
  [マウント（カウンター）]
  画面: カウンター：0回

export function DifferentWrapper() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy ? (
        <section><Counter label="sectionの中" /></section>
      ) : (
        <div><Counter label="divの中" /></div>
      )}
      <button type="button" className="toggle" onClick={() => setIsFancy(!isFancy)}>切り替え</button>
    </div>
  );
}

  [マウント（divの中）]
  > カウンターを3回クリック
  画面: divの中：3回
  > 「切り替え」をクリック（1回目）
  [アンマウント（divの中）]
  [マウント（sectionの中）]
  画面: sectionの中：0回
  ボタンの DOM は前と同じ要素か: false
  > 「切り替え」をクリック（2回目）
  [アンマウント（sectionの中）]
  [マウント（divの中）]
  画面: divの中：0回

export function TwoPositions() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy && <Counter label="派手なカウンター" />}
      {!isFancy && <Counter label="普通のカウンター" />}
      <button type="button" className="toggle" onClick={() => setIsFancy(!isFancy)}>切り替え</button>
    </div>
  );
}

  [マウント（普通のカウンター）]
  > カウンターを3回クリック
  画面: 普通のカウンター：3回
  > 「切り替え」をクリック（1回目）
  [アンマウント（普通のカウンター）]
  [マウント（派手なカウンター）]
  画面: 派手なカウンター：0回
  ボタンの DOM は前と同じ要素か: false
  > 「切り替え」をクリック（2回目）
  [アンマウント（派手なカウンター）]
  [マウント（普通のカウンター）]
  画面: 普通のカウンター：0回

{useCopy ? <CounterCopy label="CounterCopy" /> : <Counter label="Counter" />}

  [マウント（Counter）]
  > カウンターを3回クリック
  画面: Counter：3回
  > 「切り替え」をクリック（1回目）
  [アンマウント（Counter）]
  [マウント（CounterCopy）]
  画面: CounterCopy：0回
  ボタンの DOM は前と同じ要素か: false
  > 「切り替え」をクリック（2回目）
  [アンマウント（CounterCopy）]
  [マウント（Counter）]
  画面: Counter：0回