親から渡ってきた props を「あえて」useState の初期値に設定してみる

よくやりがちな間違い React を書きはじめのころによくやりがちな間違いとして 「親から渡ってきた props を useState の初期値として設定してしまい、（props の）変更がロックされてしまう」 というものがあるかと思います。 例として、以下のようなユースケースを考えてみましょう。 ２人の人物のリストがあり、どちらかを選択すると詳細フォームにその人のメールアドレスが自動入力される 詳細フォームは編集可能 詳細フォームには入力されたデータを更新（実際にはログに出力しているだけ）するための適用ボタンも用意されている 今回これらを実現するために、下記のような実装をしたとします。 import { useState } from "react"; import { Person, persons } from "./constant"; import DetailView from