Reactでフォームの入力を制御する書き方としない書き方の違い

import { useState, type FormEvent } from 'react';
import { renders } from './renders';

// 制御する書き方：入力欄の値は state が持つ
export function ControlledName() {
  renders.controlled++;
  const [name, setName] = useState('');
  const [sent, setSent] = useState<string | null>(null);
  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSent(name);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
      <p className="info">{name.length} 文字</p>
      <button type="submit">送信</button>
      {sent !== null && <p className="sent">送信した値：「{sent}」</p>}
    </form>
  );
}

// 制御しない書き方：入力欄の値はブラウザ（DOM）が持ち、送信のときに読む
export function UncontrolledName() {
  renders.uncontrolled++;
  const [sent, setSent] = useState<string | null>(null);
  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    setSent(String(formData.get('name')));
  }
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" defaultValue="" />
      <button type="submit">送信</button>
      {sent !== null && <p className="sent">送信した値：「{sent}」</p>}
    </form>
  );
}

--- 制御する（value と onChange） ---
最初: 描画 1回
「neko」と入力した後: 描画 5回 入力欄=「neko」 4 文字
送信した後: 描画 6回 送信した値：「neko」
--- 制御しない（defaultValue と FormData） ---
最初: 描画 1回
「neko」と入力した後: 描画 1回 入力欄=「neko」 
送信した後: 描画 2回 送信した値：「neko」

// 数字以外を取り除いてから state に入れる
export function DigitsOnly() {
  const [zip, setZip] = useState('');
  return <input className="digits" value={zip} onChange={(e) => setZip(e.target.value.replace(/\D/g, ''))} />;
}

// 大文字に変えてから state に入れる
export function UpperCase() {
  const [code, setCode] = useState('');
  return <input className="upper" value={code} onChange={(e) => setCode(e.target.value.toUpperCase())} />;
}

--- そのまま入れる ---
「abcd」と打った後: 値=「abcd」 カーソル=4
カーソルを2の位置に置いて「x」を打った後: 値=「abxcd」 カーソル=3
--- 数字以外を取り除く（数字を打つ） ---
「1234」と打った後: 値=「1234」 カーソル=4
カーソルを2の位置に置いて「5」を打った後: 値=「12534」 カーソル=3
--- 数字以外を取り除く（数字以外を打つ） ---
「1234」と打った後: 値=「1234」 カーソル=4
カーソルを2の位置に置いて「a」を打った後: 値=「1234」 カーソル=4
--- 大文字に変える ---
「abcd」と打った後: 値=「ABCD」 カーソル=4
カーソルを2の位置に置いて「x」を打った後: 値=「ABXCD」 カーソル=5

type Cat = { id: number; name: string };
const cats: Cat[] = [
  { id: 1, name: 'たま' },
  { id: 2, name: 'みけ' },
];

// defaultValue に、選んだ猫の名前を渡す
function NameField({ cat }: { cat: Cat }) {
  return <input className="cat-name" name="name" defaultValue={cat.name} />;
}

export function CatEditor({ useKey }: { useKey: boolean }) {
  const [cat, setCat] = useState(cats[0]);
  return (
    <div>
      {cats.map((c) => (
        <button key={c.id} type="button" onClick={() => setCat(c)}>{c.name}</button>
      ))}
      {useKey ? <NameField key={cat.id} cat={cat} /> : <NameField cat={cat} />}
    </div>
  );
}

--- key なし ---
最初: 入力欄=「たま」
「みけ」を選んだ後: 入力欄=「たま」 defaultValue=「みけ」 同じ input 要素か: true
--- key={cat.id} あり ---
最初: 入力欄=「たま」
「みけ」を選んだ後: 入力欄=「みけ」 defaultValue=「みけ」 同じ input 要素か: false

// type="reset" のボタンで、制御する入力欄と制御しない入力欄を戻す
export function ResetForm() {
  const [controlled, setControlled] = useState('');
  return (
    <form className="reset">
      <input className="r-controlled" value={controlled} onChange={(e) => setControlled(e.target.value)} />
      <input className="r-uncontrolled" defaultValue="" />
      <p className="r-state">state：「{controlled}」</p>
      <button type="reset">リセット</button>
    </form>
  );
}

--- リセットボタン（onReset なし） ---
両方に「neko」と打った後: 制御する入力欄=「neko」 制御しない入力欄=「neko」 state：「neko」
  制御する入力欄の value 属性: 「neko」
リセットを押した後: 制御する入力欄=「neko」 制御しない入力欄=「」 state：「neko」

<form className="reset-handler" onReset={() => setControlled('')}>

--- リセットボタン（onReset で state を空にする） ---
両方に「neko」と打った後: 制御する入力欄=「neko」 制御しない入力欄=「neko」 state：「neko」
  制御する入力欄の value 属性: 「neko」
リセットを押した後: 制御する入力欄=「」 制御しない入力欄=「」 state：「」

// value を渡したのに onChange を書き忘れた
export function NoOnChange() {
  const [name] = useState('たま');
  return <input className="no-onchange" value={name} />;
}

console.error: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
「たまこ」と入力した後: 入力欄=「たま」

// state の初期値を書かなかったので、最初の value が undefined になる
export function StartsUndefined() {
  const [name, setName] = useState<string>();
  return <input className="starts-undefined" value={name} onChange={(e) => setName(e.target.value)} />;
}

最初の描画の console.error: なし
「み」と入力した後: 入力欄=「み」
console.error: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://react.dev/link/controlled-components