Strict Mode によるコンポーネントの二重レンダリング

問題点

React で開発中にコンポーネントが二回レンダリングされる現象に遭遇した場合、その原因は Strict Mode である可能性が高いです。多くの開発者がデバッグの過程で以下のようなコードを目にします：

if (workInProgress.mode & StrictMode) {
  instance.render();
}

これは React の Strict Mode が意図的にコンポーネントを二回レンダリングするためです。

Strict Mode とは

Strict Mode は React の開発機能で、アプリケーションの問題を早期に発見するために設計されています。特に、予期しない副作用や非推奨のAPI使用などを検出するのに役立ちます。

重要な注意点

Strict Mode は開発環境のみで動作し、本番環境では二重レンダリングは発生しません。これは意図的な挙動であり、バグではありません。

解決策

1. Strict Mode を無効にする（非推奨）

最も簡単な方法ですが、基本的には推奨されません：

// index.js (Create React Appの場合)
ReactDOM.render(
  <App />,  // StrictMode タグを削除
  document.getElementById('root')
);

Next.js を使用している場合：

// next.config.js
module.exports = {
  reactStrictMode: false,
}

警告

Strict Mode を無効にすると、潜在的なバグを検出する機会を失います。本番環境で予期しない問題が発生する可能性があります。

2. 副作用の制御（推奨）

API コールなどの副作用がある場合、開発環境での二重呼び出しを制御する方法：

let fetchCount = 0;

useEffect(() => {
  fetchCount++;
  
  if (fetchCount === 1 && process.env.NODE_ENV === 'development') {
    console.log('開発環境での初回レンダリングをスキップ');
    return;
  }
  
  // 実際のAPI呼び出し
  callApi();
}, []);

3. React Developer Tools を使用する

Chrome 拡張機能の React Developer Tools を使用して、二重レンダリング時のコンソールログを非表示にできます：

React Developer Tools をインストール
Chrome DevTools の「Components」タブを開く
歯車アイコンをクリック
「Debugging」タブで「Hide logs during second render in Strict Mode」を有効化

ベストプラクティス

Strict Mode は React アプリケーションの品質を高めるための重要なツールです。以下のような利点があります：

副作用の検出: コンポーネントのクリーンアップ処理が適切かどうかを確認
非推奨APIの警告: 将来的に削除されるAPIの使用を警告
予期しない挙動の検出: レンダリングの一貫性の問題を早期発見

プロダクション環境では

Strict Mode の二重レンダリングは開発環境のみで発生します。本番環境ではパフォーマンスに影響しないため、安心して開発中に Strict Mode を有効にしておくことが推奨されます。

まとめ

Strict Mode による二重レンダリングは React の開発機能として意図された挙動です。これを無効にするよりも、副作用を適切に管理するコードを書くことが重要です。開発環境では Strict Mode を有効にしたまま、API コールなどコストがかかる処理は開発環境での二重実行を防ぐ仕組みを実装しましょう。

これにより、アプリケーションの堅牢性を保ちながら、不要なコストやパフォーマンスの問題を回避できます。

関連記事

Strict Mode によるコンポーネントの二重レンダリング ​

問題点 ​

Strict Mode とは ​

解決策 ​

1. Strict Mode を無効にする（非推奨） ​

2. 副作用の制御（推奨） ​

3. React Developer Tools を使用する ​

ベストプラクティス ​

まとめ ​