【入門編】 React Strict Modeの役割 – React実践ガイド

Reactの世界へようこそ！最初にこの扉を叩いたとき、誰もが一度は「あれ？何でこれ、2回動いてるの？」という不思議な体験をします。

ブラウザのコンソールを見て「`console.log` が2回出てる！」と驚いて、自分の書いたコードにバグがあるのかと焦った経験はありませんか？実はそれ、あなたがバグを書いたわけではなく、Reactがあなたを「守ろう」としてくれている証拠なんです。

今回は、React開発の守護神とも言える「Strict Mode（ストリクトモード）」について、エンジニアの現場の空気感を含めて優しく紐解いていきましょう。

—

一言でいうと、Strict Modeは「開発中の用心深いマネージャー」です。

あなたがコードを書いているとき、Reactは本番環境では絶対にやらない「ちょっとお節介なチェック」を裏側で行います。その代表的なものが「コンポーネントの二重レンダリング」です。

あなたが新しく買った家具を組み立てるシーンを想像してください。
Strict Modeは、あなたの横でずっと監視している「超・慎重なアドバイザー」です。

1. 一度組み立てる: 「はい、まずは完成。でも、これ本当に正しく組み立てられたかな？」
2. もう一度やり直す: 「念のため、もう一回バラして最初から組み立ててみよう。同じ手順で同じ完成形になるよね？」

もし、2回目に組み立てたときに「あれ？ネジが余ったぞ？」とか「さっきと形が違うぞ？」ということが起きたら、それは「組み立て手順（＝あなたの書いたコード）に、どこか不安定な要素がある」というサインです。

Strict Modeは、あえて「もう一回やる」ことで、「君の書いたコードは、何度やり直しても同じ結果を返せるほど堅牢かな？」というテストをしてくれているわけですね。

—

Reactのコンポーネントは、本来「純粋（ピュア）」であるべきだとされています。つまり、「同じ入力（props）なら、何度実行しても必ず同じ結果（UI）を返す」というルールです。

もし、あなたがコンポーネントの中で「実行するたびに変数が変わってしまう」ような書き方（副作用）をしていると、画面がチラついたり、データの整合性が取れなくなったりします。

Strict Modeは、「コードが『副作用』を隠し持っていないか？」を強制的に洗い出してくれるのです。これに気づかずに本番環境へリリースしてしまうと、ユーザーの手元で「なぜか値がズレる」「表示がおかしい」といった、再現が非常に難しい不具合を生む原因になります。

—

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

import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App’;

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
// このタグが「Strict Mode」です。
// これで囲まれたコンポーネントは、開発中に「2回レンダリング」されます。

);

もし、`App.js` の中で `console.log(“こんにちは！”)` と書くと、開発中のブラウザコンソールには「こんにちは！」が2回表示されます。

「ええっ、壊れてるの？」と不安にならなくて大丈夫ですよ！
これは「ちゃんと2回動かしても問題ないか、君のコードを確認したよ」というReactからのサインです。

—

この「2回動く」仕様のせいで、たまに困ったことが起きます。

`useEffect` の中でデータを取得する処理を書くと、開発中は2回リクエストが飛ぶことがあります。これは「サーバーに無駄な負荷をかけるのでは？」と心配になりますよね。

これも「おや？」となるポイントです。

でも、安心してください。
これはあくまで「開発用」の動作です。本番環境（ビルド後）では1回しか実行されません。むしろ、この「2回動く」ことでAPI呼び出しの重複などのバグを早期発見できるため、「あえて放置して、コードをより安全な状態に書き換える」のがプロの現場の流儀です。

—

Strict Modeは、厳格な先生のような存在です。最初は「うるさいな」と感じるかもしれませんが、彼のおかげで、私たちは「隠れたバグ」をリリース前に見つけることができます。

もし開発中に「あれ、これおかしいな？」と思ったら、それはReactがあなたに「ここ、もうちょっと工夫できるよ！」とヒントをくれている証拠です。

「警告が出た！どうしよう！」とパニックにならず、「なるほど、Reactが教えてくれたんだな」と深呼吸してみてください。 その一呼吸が、あなたの書くコードを世界一堅牢なものに変えていくはずです。

迷ったときはいつでも戻ってきてください。私たちは、あなたのフロントエンド・エンジニアとしての旅路をいつでも応援しています。それでは、快適なReactライフを！