ReactでdefaultValueの値が再レンダリングで同期されない
事象
例えば下記の記述において、valueが外部の変更により変わったとしても、inputのテキストは更新されない。
defaultValueは初回マウント時のみ設定され、その後の変更には追随しないためである。
<input defaultValue={value} />
対策
最も単純な対策は、以下。
<input key={value} defaultValue={value} />
これにより、value
が変わるとkeyが変わるため再描画が走る。
ただし、inputフォームの変更を onChange
等で取得し、 value
を直で変えるとフォームの再レンダリングにより入力状態が破棄されてしまうため、
useRef
等で別に値を保持しておき、EnterやBlurのタイミングでvalue
に反映する
等の対策が必要となる。