Reactの新ドキュメント（2023）を読む
ハマりやすそうなところをメモ
ReactはJSXではなくUIツリーの位置によってコンポーネントが別物かどうかを判定している divとsectionは別物なので切り替えたら状態は消える
treeの構造が同じならre-renderingで状態が破棄されない
コンポーネント内functionを定義するとレンダリングごとに別の関数が作成され、別のコンポーネントになってしまう
MyTextFieldは毎回生成されるので、useStateの中身が起き変わる
見た目は同じだけど別の関数は内部的には別のtreeの要素となるらしいkadoyau.icon
こういうことのはずkadoyau.icon
MyTextFieldコンポーネントはMyComponentの子要素なのでMyComponentがre-renderされるたびに再定義され、fiderがおき変わり、状態がリセットされる MyTextFieldをコンポーネント外で定義すれば独立コンポーネントとなるので、アプリケーションのライフサイクル全体で一度だけfiberが定義される。状態はきえない
keyを設定すると別物扱いできる
散りばめられたロジックを1つにまとめて、ロジックを管理しやすく、読みやすくする手段
ただしコード自体は大きくなるし、分離されるのでデバッグの難易度は上がる
reducerの名前は、状態をたくさん渡すと最終的な状態を返すreduce関数のイメージで作られた
やり方
ハンドラではロジックを実行する代わりにaction（たんなるJSのオブジェクト。何が起こったのかを簡潔に書く）をdispatchする
reducerにロジックを書く
それらをuseReducerでつなぐ
dispatch関数は最上位のコンポーネントのみでしか使えないので、現在の状態を渡したいならバケツリレーする必要がある
Reduxを使えばこの辺りは解決するkadoyau.icon