<StrictMode>

<StrictMode> は、開発環境においてコンポーネント�?一般的なバグを早期に見つける�?に役立ちます。

<StrictMode>
  <App />
</StrictMode>

リファレンス
- <StrictMode>
使用法

リファレンス

`<StrictMode>`

StrictMode を使用して、内側�?コンポーネントツリーに対して開発時専用�?挙動と警告を有効にします。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

さらに例を見る

Strict Mode では、以下�?ような開発時専用�?挙動が有効になります。

コンポーネントは、純粋でない (impure) レンダーによって引き起こされるバグを見つけるために、レンダーを追加で 1 回行います。
コンポーネントは、エフェクト�?クリーンアップし忘れによるバグを見つけるために、エフェクト�?�?�行を追加で 1 回行います。
コンポーネントが非推奨�? API を使用していないかチェックします。

props

StrictMode は props を受け付けません。

注意点

一旦 <StrictMode> でラップされたツリー内で Strict Mode を無効化する方法はありません。これにより、<StrictMode> 内�?すべて�?コンポーネントがチェックされていることを確信できます。あるプロダクト内で、チェックに価値があると感じるかどうかに関して 2 つ�?チーム�?意見が割れた場合、合意に達するか、もしくは <StrictMode> をツリー�?下側へ移動する必要があります。

使用法

アプリ全体で Strict Mode を有効にする

Strict Mode は、<StrictMode> コンポーネント内�?全コンポーネントツリーに対して追加�?開発時専用チェックを有効にします。これら�?チェックは、開発プロセス�?早い�?�階でコンポーネント�?一般的なバグを見つける�?に役立ちます。

アプリ全体で Strict Mode を有効にするには、ルートコンポーネントをレンダーする際にそれを <StrictMode> でラップします。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

特に新しく作成されたアプリについては、アプリ全体を Strict Mode でラップすることをお勧めします。createRoot �?呼び出しを自動的に行うフレームワークを使用している場合は、ドキュメンテーションを参照して Strict Mode を有効にする方法を確認してください。

Strict Mode �?チェックは開発中に�?み�?�行されるも�?ですが、これらは既にコード内に存在するが本番環境で�?確�?�な再現が難しいバグを見つける�?に役立ちます。Strict Mode を使用することで、バグをユーザが報告してくる前に�?正することができます。

補足

Strict Mode は開発中に以下�?チェックを有効にします：

コンポーネントは、純粋でない (impure) レンダーによって引き起こされるバグを見つけるために、レンダーを追加で 1 回行います。
コンポーネントは、エフェクト�?クリーンアップし忘れによるバグを見つけるために、エフェクト�?�?�行を追加で 1 回行います。
コンポーネントが非推奨�? API �?使用を使っていないかチェックします。

これら�?チェックはすべて開発環境専用であり、本番用ビルドには影響しません。

アプリ�?一部で Strict Mode を有効にする

アプリケーション�?任意�?一部分で�?み Strict Mode を有効にすることも可能です。

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

上記�?例では、Strict Mode �?チェックは Header と Footer コンポーネントに対しては�?�行されません。しかし、Sidebar と Content、およびそれら�?中にあるすべて�?コンポーネントに対しては、どれだけ深いところにあってもチェックが�?�行されます。

開発中�?二重レンダーによって見つかったバグ�?�?正

React は、あなた�?書くすべて�?コンポーネントが純関数 (pure function) であると�?�?�しています。これは、あなたが書く React コンポーネントは、同じ入力（props、state、context）が与えられた場合に常に同じ JSX を返さなければならないという意味です。

こ�?ルールを�?�らないコンポーネントは予測不能な挙動を示し、バグを引き起こします。うっかり純粋でなくなってしまったコードを見つけるために、Strict Mode はあなた�?関数�?一部（純粋であるべきも�?だけ）を開発中に 2 回呼び出します。これには以下が含まれます。

あなた�?コンポーネント関数本体（トップレベル�?ロジック�?み。イベントハンドラ内�?コードは含まれません。）
useState、set 関数、useMemo、および useReducer に渡す関数
constructor、render、shouldComponentUpdate など�?一部�?クラスコンポーネントメソッド（全リストを見る）

関数が純粋であれば、結果は毎回同じになる�?で、2 回�?�行してもそ�?振る舞いは変わりません。しかし、関数が純粋でない（例えば、受け取ったデータを書き換えている）場合、2 回�?�行することで�?に見える影響が出る（まさにそれが純粋でないということです！）傾向があります。これにより、バグを早期に見つけて�?正する�?に役立ちます。

以下は、Strict Mode で�?二重レンダーがど�?ように早期にバグを見つける�?に役立つかを示す例です。

こ�? StoryTray コンポーネントは stories �?配列を受け取り、そ�?最後に “Create Story” という項�?を加えて表示します。

Fork

export default function StoryTray({ stories }) {
  const items = stories;
  items.push({ id: 'create', label: 'Create Story' });
  return (
    <ul>
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

上記�?コードには間違いがあります。しかし、初回�?出力は正しく見えるため、�?�易に見落としてしまいます。

StoryTray コンポーネントが複数回レンダーされるとこ�?間違いに気付きやすくなります。例えば、マウスを StoryTray �?上にホバーすると背景色を変えて StoryTray が再レンダーされるようにしてみましょう。

Fork

import { useState } from 'react';

export default function StoryTray({ stories }) {
  const [isHover, setIsHover] = useState(false);
  const items = stories;
  items.push({ id: 'create', label: 'Create Story' });
  return (
    <ul
      onPointerEnter={() => setIsHover(true)}
      onPointerLeave={() => setIsHover(false)}
      style={{
        backgroundColor: isHover ? '#ddd' : '#fff'
      }}
    >
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

StoryTray コンポーネント�?上にマウスをホバーするたびに、“Create Story” が再度リストに追加されることに注意してください。コード�?意図は、最後に一度だけ追加することでした。しかし、StoryTray は props �? stories 配列を直接書き換えています。StoryTray がレンダーされるたびに、同じ配列�?最後に “Create Story” を再び追加しています。つまり、StoryTray は純関数ではなく、複数回�?�行することで異なる結果が返ってきます。

こ�?問題を解決するためには、配列�?コピーを作り、元�?配列�?代わりにそ�?コピーを書き換えるようにできます。

export default function StoryTray({ stories }) {
  const items = stories.slice(); // Clone the array
  // ✅ Good: Pushing into a new array
  items.push({ id: 'create', label: 'Create Story' });

これにより、StoryTray 関数は純関数になります。呼び出されるたびに、新しい配列�?コピーだけが書き換わり、外部�?オブジェクトや変数には影響を与えません。これによりバグは�?正されましたが、振る舞いに問題があることに気付けるようになる前に、コンポーネントを通常より多く再レンダーする必要がありました。

こ�?例では、バグが明らかではありませんでした。では、元�?（バグがある）コードを <StrictMode> でラップしてみましょう：

Fork

export default function StoryTray({ stories }) {
  const items = stories;
  items.push({ id: 'create', label: 'Create Story' });
  return (
    <ul>
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

Strict Mode は常にレンダー関数を 2 回呼び出すため、すぐに間違った結果が�?に入ります（“Create Story” が 2 回表示されます）。これにより、早期にこ�?ような間違いに気づくことができます。Strict Mode でコンポーネントをレンダーするようにすることで、先ほど�?ホバー機能�?ような、将来本番環境で発生しうる多く�?バグも、あらかじめ潰しておける�?です。

Fork

import { useState } from 'react';

export default function StoryTray({ stories }) {
  const [isHover, setIsHover] = useState(false);
  const items = stories.slice(); // Clone the array
  items.push({ id: 'create', label: 'Create Story' });
  return (
    <ul
      onPointerEnter={() => setIsHover(true)}
      onPointerLeave={() => setIsHover(false)}
      style={{
        backgroundColor: isHover ? '#ddd' : '#fff'
      }}
    >
      {items.map(story => (
        <li key={story.id}>
          {story.label}
        </li>
      ))}
    </ul>
  );
}

Strict Mode がなければ、再レンダーを追加しない限りバグを�?�易に見逃してしまう状態でした。Strict Mode は同じバグをすぐに見つかるようにします。Strict Mode は、チームやユーザに公開してしまう前にバグを見つける�?に役立ちます。

コンポーネントを純粋に保つ方法について詳しく読む

補足

React DevTools をインストールしている場合、2 回�?�?レンダー呼び出し中�? console.log 呼び出しは少し暗く表示されます。React DevTools には、それらを�?�全に非表示にする設�?�もあります（デフォルトではオフ）。

開発中にエフェクトを再�?�行して見つかったバグ�?�?正

Strict Mode は、エフェクト�?バグを見つける�?にも役立ちます。

すべて�?エフェクトにはセットアップコードがあり、一部�?エフェクトにはクリーンアップコードもあります。通常、React はコンポーネントがマウント（画面に追加）されたときにセットアップコードを呼び出し、コンポーネントがアンマウント（画面から削除）されたときにクリーンアップコードを呼び出します。そ�?後、前回�?レンダー以降に依存配列が変更された場合、React は再度クリーンアップとセットアップを呼び出します。

Strict Mode がオン�?場合、React は開発中にすべて�?エフェクトに対して 追加で 1 回、セットアップ+クリーンアップ�?サイクルを�?�行します。こ�?挙動に驚くかもしれませんが、手動で見つける�?が難しい�?妙なバグを明らかにする�?に役立ちます。

Strict Mode でエフェクトを再�?�行することが、早期にバグを見つける�?にど�?ように役立つかを示す例を示します。

以下�?例では、コンポーネントをチャットに接続しています。

Fork

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

const serverUrl = 'https://localhost:1234';
const roomId = 'general';

export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
  }, []);
  return <h1>Welcome to the {roomId} room!</h1>;
}

こ�?コードには問題がありますが、すぐには明らかではないかもしれません。

問題を�?立たせるため、機能を�?�装してみましょう。以下�?例では、roomId はハードコードされておらず、代わりに、ユーザはドロップダウンから接続したい roomId を選択できます。“Open chat” をクリックし、次にひとつずつ異なるチャットルームを選択してください。コンソールでアクティブな接続�?数を数えてみてください。

Fork

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
  }, [roomId]);

  return <h1>Welcome to the {roomId} room!</h1>;
}

export default function App() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
  return (
    <>
      <label>
        Choose the chat room:{' '}
        <select
          value={roomId}
          onChange={e => setRoomId(e.target.value)}
        >
          <option value="general">general</option>
          <option value="travel">travel</option>
          <option value="music">music</option>
        </select>
      </label>
      <button onClick={() => setShow(!show)}>
        {show ? 'Close chat' : 'Open chat'}
      </button>
      {show && <hr />}
      {show && <ChatRoom roomId={roomId} />}
    </>
  );
}

開いている接続�?数が増え続けていくことにお気づきでしょう。�?�際�?アプリケーションでは、これによりパフォーマンスやネットワーク�?問題が発生します。問題は、エフェクトにクリーンアップ関数がないことです。

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

これでエフェクトが自身を「クリーンアップ」し、古い接続を破棄するようになった�?で、リークは解消されました。しかし、問題が見えてくる�?は、より多く�?機能（選択ボックス）を追加した後でした。

元�?例では、バグは明らかではありませんでした。では、元�?（バグ�?ある）コードを <StrictMode> でラップしてみましょう：

Fork

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

const serverUrl = 'https://localhost:1234';
const roomId = 'general';

export default function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
  }, []);
  return <h1>Welcome to the {roomId} room!</h1>;
}

Strict Mode を使用すると、すぐに問題があることがわかります（アクティブな接続�?数が 2 に跳ね上がります）。Strict Mode は、すべて�?エフェクトに対してセットアップ+クリーンアップ�?サイクルを追加で�?�行します。こ�?エフェクトにはクリーンアップロジックがないため、余分な接続が作成されても破棄されませんでした。これは、クリーンアップ関数が欠けていることを示すヒントです。

Strict Mode を使用すると、こ�?ようなミスを早期に気付くことができます。Strict Mode でエフェクトにクリーンアップ関数を追加して�?正することで、先ほど�?選択ボックス�?ような、将来本番環境で発生しうる多く�?バグも、あらかじめ潰しておける�?です。

Fork

import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  return <h1>Welcome to the {roomId} room!</h1>;
}

export default function App() {
  const [roomId, setRoomId] = useState('general');
  const [show, setShow] = useState(false);
  return (
    <>
      <label>
        Choose the chat room:{' '}
        <select
          value={roomId}
          onChange={e => setRoomId(e.target.value)}
        >
          <option value="general">general</option>
          <option value="travel">travel</option>
          <option value="music">music</option>
        </select>
      </label>
      <button onClick={() => setShow(!show)}>
        {show ? 'Close chat' : 'Open chat'}
      </button>
      {show && <hr />}
      {show && <ChatRoom roomId={roomId} />}
    </>
  );
}

コンソールに表示されるアクティブな接続�?数が増えていかなくなったことに注�?してください。

Strict Mode がなければ、エフェクトがクリーンアップを必要としていることを�?�易に見逃すところでした。開発中にエフェクトに対して「セットアップ → クリーンアップ → セットアップ」を�?�行することで、Strict Mode はクリーンアップロジックが欠けていることにより気付きやすくした�?です。

エフェクト�?クリーンアップ�?�?�装について詳しく読む

Strict Mode によって有効化された非推奨警告�?�?正

React は、<StrictMode> ツリー内�?いずれか�?コンポーネントが以下�?非推奨 API を使用している場合に警告を発します。

findDOMNode。代替手�?�を見る
UNSAFE_ クラスライフサイクルメソッド（UNSAFE_componentWillMount など）。代替手�?�を見る
レガシーコンテクスト（childContextTypes、contextTypes、getChildContext）。代替手�?�を見る
レガシー�?文字列型 ref（this.refs）。代替手�?�を見る

これら�? API は主に古いクラスコンポーネントで使用されているも�?であり、現在�?アプリケーションではほとんど見られません。

Previous<Profiler>Next<Suspense>