keyを変えて、Reactコンポーネントの状態をリセットする方法

// Chat.tsx
import { useEffect, useState } from 'react';
import type { Contact } from './contacts';
import { log } from './log';

export function Chat({ contact }: { contact: Contact }) {
  const [draft, setDraft] = useState('');
  log(`描画 Chat（${contact.name}） draft="${draft}"`);

  useEffect(() => {
    log(`エフェクト開始（${contact.name}）`);
    return () => {
      log(`後片付け（${contact.name}）`);
    };
  }, [contact.id]);

  return (
    <section className="chat">
      <textarea
        value={draft}
        placeholder={`${contact.name} へのメッセージ`}
        onChange={(e) => setDraft(e.target.value)}
      />
      <SendOptions />
      <button>{contact.name} に送る</button>
    </section>
  );
}

// 子のコンポーネントにも state を持たせる
function SendOptions() {
  const [urgent, setUrgent] = useState(false);
  return (
    <label>
      <input
        type="checkbox"
        checked={urgent}
        onChange={(e) => setUrgent(e.target.checked)}
      />
      急ぎ
    </label>
  );
}

// Messenger.tsx（抜粋。import と ContactList は省略）
// key なし：相手を変えても、同じ Chat が使い回される
export function MessengerNoKey() {
  const [toId, setToId] = useState('alice');
  const to = contacts.find((c) => c.id === toId)!;
  return (
    <div>
      <ContactList onSelect={setToId} />
      <Chat contact={to} />
    </div>
  );
}

--- 1a. <Chat contact={to} />（key なし） ---
（中略）
  > Bob をクリック
  [描画 Chat（Bob） draft="こんにちは"]
  [後片付け（Alice）]
  [エフェクト開始（Bob）]
  画面: textarea="こんにちは" placeholder="Bob へのメッセージ" 急ぎ=true
  textarea の DOM は前と同じ要素か: true

// Messenger.tsx（抜粋）
// key あり：相手が変わると、Chat を作り直す
export function MessengerWithKey() {
  const [toId, setToId] = useState('alice');
  const to = contacts.find((c) => c.id === toId)!;
  return (
    <div>
      <ContactList onSelect={setToId} />
      <Chat key={to.id} contact={to} />
    </div>
  );
}

--- 1b. <Chat key={to.id} contact={to} /> ---
（中略）
  > Bob をクリック
  [描画 Chat（Bob） draft=""]
  [後片付け（Alice）]
  [エフェクト開始（Bob）]
  画面: textarea="" placeholder="Bob へのメッセージ" 急ぎ=false
  textarea の DOM は前と同じ要素か: false
  > Alice をクリック
  [描画 Chat（Alice） draft=""]
  [後片付け（Bob）]
  [エフェクト開始（Alice）]
  画面: textarea="" placeholder="Alice へのメッセージ" 急ぎ=false

// EffectReset.tsx（抜粋。import と CommentBox は省略）
// 🔴 userId が変わったら、エフェクトで comment を空にする
export function ProfileEffect({ userId }: { userId: string }) {
  const [comment, setComment] = useState('');
  useEffect(() => {
    setComment('');
  }, [userId]);
  return <CommentBox userId={userId} comment={comment} onChange={setComment} />;
}

// ✅ 外側で key を渡す。使う側は userId を普通に渡すだけでよい
export function ProfileKey({ userId }: { userId: string }) {
  return <Profile key={userId} userId={userId} />;
}

function Profile({ userId }: { userId: string }) {
  const [comment, setComment] = useState('');
  return <CommentBox userId={userId} comment={comment} onChange={setComment} />;
}

--- 2a. エフェクトで空にする（ProfileEffect） ---
（中略）
  > userId を alice から bob に変える
  [描画 CommentBox userId=bob comment="すてきな写真"]
  [描画 CommentBox userId=bob comment=""]
  input の値: ""

--- 2b. key で作り直す（ProfileKey） ---
（中略）
  > userId を alice から bob に変える
  [描画 CommentBox userId=bob comment=""]
  input の値: ""

// AdjustDuringRender.tsx（抜粋。import と Child は省略）
// 一部の state だけを戻したいとき：描画中に前の userId と比べる
export function ProfileAdjust({ userId }: { userId: string }) {
  const [comment, setComment] = useState('');
  const [rating, setRating] = useState(0); // これは残したい
  const [prevUserId, setPrevUserId] = useState(userId);
  if (userId !== prevUserId) {
    setPrevUserId(userId);
    setComment('');
  }
  log(`描画 ProfileAdjust userId=${userId} comment="${comment}" rating=${rating}`);
  return (
    <>
      <Child label={`comment="${comment}"`} />
      <input value={comment} onChange={(e) => setComment(e.target.value)} />
      <button id="rate" onClick={() => setRating(rating + 1)}>★ {rating}</button>
    </>
  );
}

--- 2c. 描画中に前の userId と比べる（ProfileAdjust） ---
（中略）
  > userId を alice から bob に変える
  [描画 ProfileAdjust userId=bob comment="すてきな写真" rating=1]
  [描画 ProfileAdjust userId=bob comment="" rating=1]
  [  描画 子 comment=""]
  input の値: ""
  rating のボタン: ★ 1

// ResetButton.tsx（抜粋。import と SignupForm は省略）
// 「入力をやり直す」で、フォームをまるごと初めの状態に戻す
export function SignupPage() {
  const [version, setVersion] = useState(0);
  return (
    <>
      <SignupForm key={version} />
      <button id="reset" onClick={() => setVersion(version + 1)}>
        入力をやり直す
      </button>
    </>
  );
}

--- 3. key={version} で、フォームを初めの状態に戻す ---
  入力後: name="neko" 同意=true
  > 「入力をやり直す」をクリック
  クリック後: name="" 同意=false

// RandomKey.tsx（抜粋。import と Note は省略）
// 🔴 描画のたびに key が変わる
export function RandomKeyPage() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Note key={Math.random()} />
      <button id="other" onClick={() => setCount(count + 1)}>関係のないボタン（{count}）</button>
    </>
  );
}

--- 4. key={Math.random()} ---
  入力後: note="メモ"
  > 「関係のないボタン」をクリック
  クリック後: note=""