TL;DR
非制御コンポーネント。ローカルな state を持つコンポーネントである。Controlled Component と対になる。
なぜ必要か
Props で設定する項目が少なくて済むので、親コンポーネントの中に入れて使いやすい。
例
isActive をローカルな state として持つパネルである。親コンポーネントは、パネルが開いているかどうかを制御できない。
function Panel({ title, children }) {
const [isActive, setIsActive] = useState(false)
return (
<section className="panel">
<h3>{title}</h3>
{isActive ? <p>{children}</p> : <button onClick={() => setIsActive(true)}>Show</button>}
</section>
)
}注意点
複数のコンポーネントを協調して動かしたい場合などには、柔軟性に欠ける。
また、value に undefined が渡された場合も、Uncontrolled Component として扱われる。
自分の理解
value に undefined が渡って Uncontrolled Component になってしまう場面には、開発中によく出くわす。