controlled input と uncontrolled input の違いは何ですか？

Question

Accepted Answer

違いは、**input の値の source of truth が誰か**です。React state なのか、DOM 自体なのか、という点です。 ## Controlled（React が値を所有する） input の `value` は state によって決まり、`onChange` が state を同期します。DOM は常に React を反映します。 ```jsx const [name, setName] = useState(""); setName(e.target.value)} // キー入力ごとに state を更新する /> ``` state が source of truth なので、キー入力ごとに validate、format、transform できます（例: 大文字に強制する、長さを制限する、submit button を disable する）。 ## Uncontrolled（DOM が値を所有する）値はブラウザが保持し、必要なときだけ ref 経由で読み取ります。 ```jsx const inputRef = useRef(null); ; // submit 時: const value = inputRef.current.value; ``` ## どちらを使うべきか - **Controlled**: ほとんどの form。validation、conditional UI、単一の source of truth が得られます。欠点はキー入力ごとに re-render することですが、通常は問題になりません。 - **Uncontrolled**: 単純な form、file input（`` は常に uncontrolled）、または non-React widget との統合。コードは少なくなりますが、変化が起きた瞬間に反応することはできません。両方を混ぜる（`value` と `defaultValue` の両方を渡す）のはよくある間違いで、React warning の原因になります。