【入門編】 React Strict ModeとPropsのライフサイクル – React実践ガイド

こんにちは！Reactの学習、毎日お疲れ様です。
画面の中に自分の書いたコードでボタンがポコッと現れて、クリックしたら動く……あの瞬間って、何年エンジニアをやっていてもやっぱりワクワクしますよね。

さて、今回はReactを学び始めた人が「あれっ？」と必ず一度はつまずく、そしてプロの現場でも「おっ」と気を配るポイント――「React Strict Mode（ストリクトモード）とProps（プロップス）のライフサイクル」についてお話しします。

「なんだか難しそうな名前が出てきたぞ……」と思いましたか？ 大丈夫です！身近な例えを交えながら、ひとつずつ優しくほどいていきますので、コーヒーでも飲みながらリラックスして読んでいってくださいね。

—

1. 最初のおばけ？「画面が2回描画される」謎の現象

Reactのアプリを作り始めると、なんだかコンソールログに同じ文字が2回表示されたり、妙な動きをしたりすることはありませんか？

「あれ、俺のコード、バグってる……？」

そう慌ててコードを睨みつけてしまうのですが、実はこれ、あなたのコードのせいではないことが多いんです。犯人は、Reactの「Strict Mode（厳格モード）」という仕組みです。

カフェの店員さんと「注文の復唱」で例えてみましょう

想像してみてください。あなたが人気のおしゃれカフェに行って、店員さんにこう注文しました。

> 「アイスカフェラテを一つ、シロップ少なめでお願いします！」

すると、優秀な店員さんはこう言いました。
> 「かしこまりました！アイスカフェラテを一つ、シロップ少なめですね。……よし、もう一回確認です。アイスカフェラテを一つ、シロップ少なめですね！」

……ちょっと「えっ、さっき聞いたよね？」って思いますよね。でも、この店員さんは意地悪で聞き返しているわけではありません。「聞き間違いがないか、最高の一杯を作るためにあえて二回確認している」のです。

ReactのStrict Modeもこれと全く同じことをやっています。
開発中のアプリに対して、「コンポーネントが正しく動くか、あえて裏で2回レンダリング（描画）してチェックしよう！」とお節介を焼いてくれているのです。

—

2. Propsの受け渡しとStrict Modeの関係

私たちが親コンポーネントから子コンポーネントへ、`Props`というバトン（データ）を渡すとき、このStrict Modeがどう関わってくるのでしょうか。

例えば、親から「今日の天気は晴れです」というPropsを受け取って、画面に表示する子コンポーネントがあったとします。

Strict Modeが有効な環境では、Reactは次のような裏の動きをします。

1. 1回目の描画： 「はい、Propsとして『晴れ』を受け取りました！」（画面を表示）
2. 2回目の描画： 「よし、もう一回確認！ はい、やっぱりPropsは『晴れ』ですね！」（画面を再描画）

人間には一瞬の出来事なので同じ画面に見えますが、内部ではこの「二度手間（リハーサル）」が行われています。

ここでよくある「つまずきポイント」

この「2回描画される」という性質を知らないと、こんなパニックが起きがちです。

> 「あれ？ APIからデータを取ってくる処理（useEffectなど）を書いたのに、コンソールにデータが2回表示される！ バグだ！！」

安心してください、バグではありません。 これはReactが「将来、アプリが大きくなったり複雑な動きをしたりしても、データの受け渡しや副作用（API通信など）がちゃんと耐えられるか？」をテストしてくれている健全な証拠なんです。本番環境（ユーザーが実際に使う公開後）では、この2回実行は自動的にオフになります。

—

3. 実例で見てみよう！優しいコードとコメント

百聞は一見にしかず。実際に親から子へPropsを渡し、Strict Modeの息づかいを感じられる小さなコードを見てみましょう。

そのままコピペして、お手元の開発環境（CodeSandboxやViteなど）で動かしてみてくださいね。

import React, { useState, useEffect } from ‘react’;

// ==========================================
// 子コンポーネント：親から「お名前」をもらって挨拶するよ
// ==========================================
function GreetingCard({ userName }) {
// Strict Modeの環境では、この「こんにちは」のログが
// マウント時に「2回」コンソールに出ることがあります！
useEffect(() => {
console.log(`【副作用の実行】 ${userName} さんへのウェルカムメール送信処理（仮）`);

// クリーンアップ関数（お片付けの処理）
return () => {
console.log(`【お片付け】 ${userName} さんの処理をリセットします`);
};
}, [userName]); // userNameが変わったときだけ実行される

return (

);
}

// ==========================================
// 親コンポーネント：状態（State）を管理して子にバトンを渡すよ
// ==========================================
export default function App() {
const [count, setCount] = useState(0);
const myName = “ひなた”; // 子コンポーネントに渡すProps

return (

);
}

このコードを動かしたときのポイント

ブラウザの開発者ツール（F12キーを押して「Console」タブ）を開きながら、このページをリロード（再読み込み）してみてください。

コンソールに、次のような順番でログが出力されるはずです。

1. `【副作用の実行】 ひなた さんへのウェルカムメール送信処理（仮）`
2. `【お片付け】 ひなた さんの処理をリセットします` （※Strict Modeによる一度目のアンマウント）
3. `【副作用の実行】 ひなた さんへのウェルカムメール送信処理（仮）` （※本番同様の再マウント）

「うわっ、本当に2回動いた！」と思いましたか？
大正解です。これがStrict Modeの働きです。開発中はこのように「一度組み立てて、すぐバラして、もう一回組み立て直す」という厳しいストレステストを裏で行うことで、私たちが書いたコードに穴がないかを守ってくれているのです。

—

4. 初学者が心がけておくべき対策と心構え

Strict Modeの二重レンダリングやライフサイクルの動きに直面したとき、私たちが意識すべきことはとてもシンプルです。

1. 「2回動くこと」を前提にコードを書く

API通信やデータの取得、タイマーのセットなどを行う際、「1回だけ実行されるはずだ」という思い込みを捨てましょう。「2回実行されてもアプリがおかしくならないか？」あるいは「不要な二重処理になっていないか？」と考える癖をつけると、一気にシニアエンジニアの視点に近づけます。

2. クリーンアップ（お片付け）をサボらない

useEffectの中でタイマーやイベントリスナーを登録したら、必ずクリーンアップ関数（returnする関数）を書きましょう。「使ったものは元にあった場所へ片付ける」。お母さんに教えられたようなこの基本が、Reactの世界ではバグを防ぐ最強の呪文になります。

3. 不安になったら一度深呼吸

「画面がチカチカする」「ログが2行出る」――そんなときは、慌てずにコードのどこが問題かを切り分けましょう。大抵の場合、それはエラーではなく、Reactがあなたを優秀なプログラマーに育てるために優しく見守ってくれている証拠です。

—

まとめ

今回は、少しディープでありながら避けて通れない「React Strict ModeとPropsのライフサイクル」についてお話ししました。

• Strict Modeは、あなたのコードを鍛えるための「頼もしい鬼コーチ」
• 開発中に副作用やPropsの処理が2回走るのは、テストのための仕様（バグではない！）
• 「使ったら片付ける（クリーンアップ）」を意識すれば、どんな複雑なデータ受け渡しも怖くない！

最初は戸惑うことも多いReactのルールですが、仕組みさえ分かってしまえば、こんなに頼もしく、美しく設計されたフレームワークはありません。

あなたのReactの旅が、今日から少しでも楽しく、ワクワクするものになりますように。
つまずいたときはいつでも、この記事を思い出してみてくださいね。それでは、また次の記事でお会いしましょう！