フォーカスの分離 - コンテナコンポーネントと表示コンポーネント#
React でのフォーカスの分離 - コンテナコンポーネントと表示コンポーネントの使用方法（freecodecamp.org）
コンポーネントが 2 回レンダリングされる#
一般的には、コンポーネントを <React.StrictMode> でラップすると、正常な予想される動作になります。なぜなら、厳格モードは開発環境で一部の関数を 2 回呼び出す（純粋な関数に限る）ため、エラーを早期に発見して修正できます。
参照： – React