状態をリセットしたいとき(React)

UI ツリー

React はツリー構造を使用して、作成した UI を管理およびモデル化します。
React は JSX から 独自の DOM ツリーを作成します。
次に、React DOM はブラウザの DOM 要素を更新して、その 独自の DOM ツリーに一致させます。

コンポーネントに状態を与えると、その状態がコンポーネント内に存在すると思うかもしれません。
しかし、状態は実際には React 内（メモリ内）に保持されます。
React は、保持している状態の各部分を、そのコンポーネントが UI ツリー内のどこにあるかによって、正しいコンポーネントに関連付けます。

コンポーネントの状態のリセットの仕方

状態を保持させたくない・フォームの値をリセットさせたいなどの時に State を消去する方法を下記します

• コンポーネントのレンダリングが停止させて、要素が消す
• ツリーの同じ場所に別の要素が生成する
• コンポーネントを別の場所にレンダリングする
• keyを使用する

// 状態がリセットされない
{
  isPlayerA ? <Counter person="Taylor" /> : <Counter person="Sarah" />;
}

// 状態がリセットされる
{
  isPlayerA && <Counter person="Taylor" />;
}
{
  !isPlayerA && <Counter person="Sarah" />;
}

// 状態がリセットされる
{
  isPlayerA ? (
    <Counter key="Taylor" person="Taylor" />
  ) : (
    <Counter key="Sarah" person="Sarah" />
  );
}

コンポーネント関数の定義をネストしてはいけない理由

親コンポーネントのレンダリングごとに異なる子コンポーネント関数が生成されることになり、
同じ位置に別のコンポーネントが生成されることになり、状態がリセットされます。
この問題を回避するには、常にコンポーネント関数を最上位で宣言し、定義をネストしないでください。

フォームを入力した状態で、ボタンを押すとフォームの値が消えます。
React 内部では、生成されたフォームコンポーネントは前後で別のコンポーネントとしてみられていることになります。