ReactでdefaultValueの値が再レンダリングで同期されない

事象

例えば下記の記述において、valueが外部の変更により変わったとしても、inputのテキストは更新されない。
defaultValueは初回マウント時のみ設定され、その後の変更には追随しないためである。

<input defaultValue={value} />

対策

最も単純な対策は、以下。

<input key={value} defaultValue={value} />

これにより、valueが変わるとkeyが変わるため再描画が走る。
ただし、inputフォームの変更を onChange 等で取得し、 valueを直で変えるとフォームの再レンダリングにより入力状態が破棄されてしまうため、

  • useRef 等で別に値を保持しておき、EnterやBlurのタイミングでvalueに反映する

等の対策が必要となる。