UI Controlled / Uncontrolled Component

制御コンポーネント（controlled） と 非制御コンポーネント（uncontrolled）

Radixのslider ではvalue/defaultValueどちらも存在する。

これはcontrolled/uncontrolledをどちらも制御可能にするため。

使い分けは？

Value

const [name, setName] = useState("");

<Input
    value={name}
    onChange={(event) => setName(event.target.value)}
/>

defaultValue

// 初回マウント時だけ "A" が初期値になる。
// 後から initialName が "B" になっても、入力値は自動で B にはならない。
<Input defaultValue={initialName} />