Reactで「マウント」が起きるのはどのタイミング？

解説

正解は「コンポーネントが最初にDOMに追加されるとき」です。Reactにおけるマウント（mount）とは、コンポーネントが生成されて実際のDOMに初めて配置される瞬間を指します。stateの更新やpropsの変更で起きるのは再レンダー（re-render）であり、マウントではありません。「画面に変更があるたび毎回」も再レンダーの説明に近く、マウントとは異なります。マウント・再レンダー・アンマウントの3つのフェーズReactコンポーネントには大きく3つのライフサイクルがあります。マウント（mount）：コンポーネントが初めてDOMに追加される。初期stateの設定やAPIからのデータ取得など、最初の1回だけ実行したい処理はここで行う再レンダー（re-render）：stateやpropsの変更をきっかけに、コンポーネントの出力（JSX）を再計算する。DOMは丸ごと作り直されるのではなく、前回との差分だけが更新されるアンマウント（unmount）：コンポーネントがDOMから取り除かれる。条件分岐で非表示にしたり、ページ遷移で画面が切り替わったときなどに起きる初心者が混同しやすいポイントよくある誤解は「stateが変わるたびにコンポーネントが消えて作り直される」というものです。実際にはReactは仮想DOM（Virtual DOM）を使って前回のレンダー結果と今回の結果を比較し、変わった部分だけを実際のDOMに反映します。コンポーネント自体はマウントされたまま残り続けるため、stateも保持されます。useEffectでマウント時だけ処理を実行する方法useEffectの第2引数に空の配列[]を渡すと、マウント時に1回だけ実行される処理を書けます。useEffect(() => { console.log('マウントされた！'); }, []); // 空配列 = マウント時のみこの配列を省略すると、マウント時だけでなく毎回の再レンダー後にも実行されます。ここが「マウント」と「レンダー」の違いを実感しやすいポイントです。マウントとアンマウントを確認する簡単な実験条件分岐でコンポーネントの表示・非表示を切り替えると、マウントとアンマウントの動きを直接確認できます。{show && <MyComponent />}のように書くと、showがtrueになるたびにマウント、falseになるたびにアンマウントが起き、stateもリセットされます。「表示を切り替えたらカウンターが0に戻った」という挙動を見ると、再レンダーとマウントの違いが体感できるはずです。