🚨 読む前の注意 🚨

この記事の結論として「props が変化しても state の値が維持される」という挙動は codepen で確認できたが、裏付ける仕様をドキュメントから見つけることができていないので、この試験が正しいのか自分でも確認できていない。

経緯

react は props と state の 2 種類の値を使って実装していく。 props はコンポーネントに渡される引数であり、state は useState 関数で管理されるコンポーネント内部の状態を管理する値。

基本的に props は表示するだけのいわば readonly なデータとしての性質のものだが、これをときどき useState 関数の initialValue として使うことがある。たとえば input の初期値を前回設定した値にしておきたい場合など。

そして、さらに困ってしまう場合が、この外部から渡されてコンポーネント内部では state の初期値となった値が、外部のなんらかイベントで変化してしまう場合である。たとえば「入力リセット」ボタンを押されて全部の input を空っぽにしたい場合もある(あった)。

変数の変遷の例

この例ではこんな筋書きだとする。

• 前回登録してあった値は init
• init の input がユーザが hello に書き換え
  • state="hello" となる
• そのあとユーザがリセットボタンをおす
  • props=""(空文字) となる
• input の中身はどうなる?
  • props が優先されるなら空文字になる
  • state が優先されるなら hello のままである

それぞれの変数の変遷はこんな感じである。

• props

  • 'init' => ""

• state

  • init => 'hello'

props が変化したのでコンポーネントは再描画される。再描画されるということは 僕は state はいったんご破産になるのかと思っていたが、動作を確認する限りだと props が変化したときに state の値は変わらないようだった。

単純な実装で試す

この挙動が正しいのか、なんらかのバグが織り込んだ結果なのかわからなかったので、検証するための単純な実装を codepen で動かしてみた。

• React props vs state

ここでためしても、props の値が変わっても state の値が保持されることがわかった。(コンソールを仕込んでいるのでそれをみながらだと変化がわかりやすい)

所感

ドキュメントを読んだが、props の変化による rerender と state の関係については読み解くことができなかった。これが仕様なのかそうでないのかわからない。

• useState – React
• react-guide/props-vs-state.md at master · uberVU/react-guide
• React.Component – React