こんにちは！Reactの世界へようこそ。
日々コードを書いていると、ふと不思議なことに気づく瞬間がありませんか？

「あれ、コンソールログを出してみたら、なぜか同じメッセージが2回表示されている……自分のコードがバグっているのかな？」

そう思って不安になったあなた。まず最初にこれだけは伝えておきます。「大丈夫です。あなたのコードは間違っていません。」

今回は、Reactを学び始めた多くの人が最初に遭遇する「魔法の仕掛け」、Strict Mode（ストリクトモード）について、現場の視点から紐解いていきましょう。

—

Reactのプロジェクトを立ち上げると、最初から `index.js`（または `main.jsx`）の中に `` というタグが書かれているはずです。

これを一言で表すなら、「開発中のあなたのコードを厳しくチェックしてくれる、頼れる専属トレーナー」です。

あなたが料理の練習をしているとします。Strict Modeは、あなたの横でずっと目を光らせている料理の師匠です。「もう一回やってみて！」と、同じ手順をあえてもう一度リクエストしてくることがあります。

なぜそんなことをするのでしょうか？それは、「二回繰り返しても、ちゃんと正しく料理が完成するか？」をテストしているからです。

Reactの初心者にとって、最も驚くのが「コンポーネントが二回マウント（表示）される」という現象です。でも、これには明確な理由があります。

Reactは、データが変わるたびに画面を更新する「リアクティブ」な仕組みです。もし、あなたの書いたコードが「一回目はうまくいくけど、二回実行すると画面が壊れる」という作りになっていたら、ユーザーが操作する中でいつか必ずバグが起きてしまいます。

Strict Modeは、「もし将来、Reactがこの処理を裏で何度も実行したとしても、画面の状態が崩れないかな？」ということを、開発中にこっそりシミュレーションしてくれているんです。

以下のコードを、Reactの開発環境で試してみてください。

import { useEffect } from ‘react’;

function MyComponent() {
useEffect(() => {
// 開発中、Strict Modeがオンだとここが2回実行されます
console.log(“料理を作りました！”);

// クリーンアップ関数（お片付け）
return () => {
console.log(“後片付けをしました…”);
};
}, []);

return

こんにちは、Reactの世界へ！

;
}

export default MyComponent;

ブラウザのコンソールを開いてリロードすると、こう見えるはずです：
1. 料理を作りました！
2. 後片付けをしました…
3. 料理を作りました！

「えっ、2回作って1回片付けてる…？」と不安になりますよね。でも、これは「Reactが、君のコードはちゃんと『お片付け』の処理を正しく書けているかを確認したよ！」という証明なんです。もしここでお片付けができていないと、後で大きなバグの温床になります。それを未然に防いでくれているわけですね。

この「二重実行」は、あくまで開発環境（npm startしている時）だけの特別な挙動です。本番環境でユーザーがサイトを閲覧する際には、このチェックは行われません。

もし、このチェックによって不都合があるなら（例えば、サーバーにデータを保存するAPIを呼んでいるなど）、それは「副作用（Side Effects）」の管理を見直すチャンスです。

Reactを始めたばかりの頃は、コンソールに出る警告や二重実行が少し恐ろしく感じるかもしれません。でも、Strict Modeが警告を出してくれるのは、あなたが「より良いコード」を書けるように手助けをしているからです。

エラーや警告を隠すのではなく、「お、教えてくれてありがとう！」と受け止めてみてください。その積み重ねが、いつの間にかあなたを誰よりも頼られるフロントエンドエンジニアに成長させてくれるはずです。

これからも、一緒に楽しくコードを書いていきましょう！何か詰まったら、いつでも戻ってきてくださいね。応援しています！

【入門編】 React Strict Modeの挙動と目的 – React実践ガイド