フロントエンドの定番ライブラリ「React」バージョン18の新機能を紹介──Strictモードと新フックに注目！

フロントエンド開発における定番ライブラリ「React」の最新バージョン解説 第2回

　本記事では、動的なWebページを構築するフロントエンド開発にとって定番ともいえるライブラリー「React」の最新版であるバージョン18について、新機能を紹介していきます。前回はWebページの「並行レンダー」をベースに、画面更新の優先度指定や不要な画面更新の抑制などの機能を紹介しました。今回は潜在的な問題点を洗い出すStrictモードへの機能追加と、新たなフックについて紹介します。

はじめに

　Reactは、動的なWebページのインターフェースを構築するためのJavaScriptライブラリーで、Facebookとオープンソースコミュニティによって開発が続けられています。

図1 Reactの公式ページ

　Reactは2022年3月にメジャーアップデートであるバージョン18（以下「React 18」がリリースされ、現在の最新バージョンは18.2.0です。React 18の概要は公式ブログ記事で紹介されています。

図2 React 18を紹介する公式ブログ記事

　本記事では、前回に引き続き、React 18で導入された改良や新機能を紹介します。

対象読者

• 新バージョンでReactを体験してみたい方
• すでにReact開発に従事していて、新機能を知りたい方
• Reactの最新動向を追っておきたい方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• Windows 10 64bit版
• React 18.2.0
• Node.js v18.16.1
• Microsoft Edge 114.0.1823.67

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後「npm run start」コマンドを実行して、「http://localhost:3000」をWebブラウザーで表示します。本記事内ではReact 18の新機能に関する本質的な部分を抽出して説明するので、それ以外の実装は各サンプルコードを参照してください。

潜在的な問題点を洗い出すStrictモードへの機能追加

　ReactのStrictモードは、開発中にアプリケーションの潜在的な問題点を洗い出すツールです。React 18ではこのStrictモードに機能が追加されました。

　Reactの将来バージョンでは、より効率の良い表示を行うため、同じ状態（ステート）を保ったままコンポーネントを非表示（アンマウント）、再表示（再マウント）できるようになる予定です。この場合コンポーネントでは、表示・非表示時に実行される追加処理（「副作用」と呼ばれます）が複数回実行されても大丈夫なようにしておく必要があります。この確認のため、React 18のStrictモードでは、すべてのコンポーネントを表示する際に、内部的に「マウント→アンマウント→再マウント」と実行されるようになります。

　Strictモードは、適用する場所を<React.StrictMode>タグで囲むことで利用できます。ReactのCLI「create-react-app」で生成したプロジェクトでは既定で、Webページ全体のコンポーネント（Appコンポーネント）にStrictモードが適用されています（リスト1）。

［リスト1］Strictモードの適用（p001-strict/src/index.js）

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>  {/* Strictモードここから */}
    <App />
  </React.StrictMode> {/* Strictモードここまで */}
);

　Strictモードの動作を、図3のサンプルで表示します。このサンプルはStrictモードで実行すると、リストに同じ文言が2行表示されますが、Strictモードを解除すると1行だけ表示されます。

図3　Strictモードのサンプル（p001-strict）

　図3のサンプルのAppコンポーネントはリスト2の通りです。

［リスト2］図3のサンプルのAppコンポーネント（p001-strict/src/App.js）

function App() {
  useEffect(() => {
    // 副作用の実行 ...（1）
    console.log('副作用の実行');
    // 副作用が1回だけ実行されることを意図した処理 ...（1a）
    // 複数回実行されるとつじつまが合わない
    const li = document.createElement('li');
    li.textContent='Galaxy S23 Ultra';
    document.getElementById('effect-area').appendChild(li);
    return () => {
      // クリーンアップの処理 ...（2）
      console.log('クリーンアップ')
      // 複数回実行に対応するためのクリーンアップ ...（2a）
      // const elem = document.getElementById('effect-area');
      // elem.children[elem.childElementCount - 1].remove();
    }
  });
  return (
    <div>
      <h3>React 18 Strictモード</h3>
      <ul id="effect-area"></ul>
    </div>
  );
}
export default App;

　リスト2のuseEffectフックの引数に与えた関数で、副作用の実行処理（1）を指定します。また、その関数内でreturnする関数でクリーンアップの処理（2）を指定します。副作用では（1a）の処理でリストに1行追加しますが、副作用が複数回実行されると、その回数だけリストに行が追加されてしまいます。副作用の処理に対応するクリーンアップ処理（2a）は、ここではコメントアウトされています。

　そのため、index.jsでリスト1の通りStrictモードが設定されている場合、（1a）の処理が2回実行されて、リストに2行表示されます。この時コンソールログを見ると、「副作用の実行→クリーンアップ→副作用の実行」の順番で実行されていることがわかります（図4）。

図4 リスト1、2をStrictモードで実行したときのログ（p001-strict）

　index.jsで<React.StrictMode>タグを削除すると、リスト2のコンポーネントは想定通りリストが1行だけになります。この時のコンソールログは「副作用の実行」が1回だけ出力されます（図5）。

図5 リスト1、2を非Strictモードで実行したときのログ（p001-strict）

　しかし、この状態ではReactの将来バージョンで不具合を起こすかもしれません。リスト2（2a）のクリーンアップ処理を有効にすると、Strictモードでも想定通りの動作となり、将来発生しうる不具合を事前に抑止できます。

　なおStrictモードは、開発環境で直接実行した場合のみ効果が発生し、本番ビルドには影響を与えません。