Reactのイベントが2回実行される？Strict Modeの影響と対処法

Reactは、ユーザーインターフェースを構築するための人気のあるJavaScriptライブラリです。特にReact 18では、開発者が直面する新しい挙動がいくつか追加されました。

React – ユーザインターフェース構築のための JavaScript ライブラリ
ユーザインターフェース構築のための JavaScript ライブラリ
js.legacy.reactjs.org

その中でも、Strict Modeの導入により、コンポーネントがマウントされる際にuseEffectが2回実行されるという現象が注目されています。この挙動は、特にイベントハンドラにおいても影響を及ぼすことがあります。

本記事では、ReactのStrict Modeがどのようにイベントの実行に影響を与えるのか、具体的な対処法とともに解説します。

目次

1. Strict Modeとは何か

Strict Modeは、Reactの開発環境でのみ有効な機能であり、潜在的な問題を早期に発見するためのツールです。

具体的には、コンポーネントが意図しない副作用を持っているかどうかを検出するために、コンポーネントを意図的に2回レンダリングします。この動作は、開発者がコードの純粋性を保つために重要です。React 18では、Strict Modeがデフォルトで有効になっているため、開発中にこの挙動に遭遇することが多くなります。

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

2. useEffectが2回実行される理由

React 18では、Strict Modeが有効な場合、useEffectがコンポーネントのマウント時に2回実行されます。この挙動は、開発者が副作用を持つコードを見直すきっかけとなります。

具体的には、以下のような理由からです。

  • 副作用の検出
    • useEffectが2回実行されることで、開発者は副作用が正しく管理されているかを確認できます。これにより、意図しない動作を早期に発見できます。
  • 純粋関数の確認
    • Reactのコンポーネントは純粋関数であるべきです。2回実行されることで、状態が変わることなく同じ結果を返すかどうかを確認できます。

3. イベントハンドラへの影響

Strict Modeの影響は、useEffectだけでなく、イベントハンドラにも及びます。例えば、ボタンのクリックイベントが2回発生することがあります。これは、onClickイベントが2回トリガーされるためです。

以下は、ボタンのクリックイベントを処理するサンプルコードです。

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>You clicked {count} times</p>
    </div>
  );
}

export default App;

このコードでは、ボタンをクリックするたびにカウントが増加し、コンソールにメッセージが表示されます。しかし、Strict Modeが有効な場合、ボタンをクリックすると、handleClickが2回実行されることがあります。このため、カウントが意図せず2回増加することになります。

4. 対処法

この問題に対処するためには、いくつかの方法があります。以下に代表的な対処法を示します。

  • Strict Modeを無効にする
    • 開発中にこの挙動が煩わしい場合、Strict Modeを無効にすることができます。ただし、これは推奨されません。なぜなら、Strict Modeは潜在的な問題を発見するための重要なツールだからです。
  • イベントハンドラの最適化
    • イベントハンドラ内での状態更新を最適化することで、意図しない再レンダリングを防ぐことができます。例えば、状態を更新する際に、前の状態を基に新しい状態を計算するようにします。
  • useEffectの依存配列を正しく設定する
    • useEffectの依存配列を適切に設定することで、不要な再実行を防ぐことができます。依存配列に必要な値だけを指定することで、useEffectが意図しないタイミングで実行されるのを防ぎます。

5. まとめ

ReactのStrict Modeは、開発者にとって非常に有用なツールですが、その挙動には注意が必要です。特に、useEffectが2回実行されることや、イベントハンドラが意図せず2回呼び出されることがあります。

これらの問題に対処するためには、Strict Modeを無効にするのではなく、コードを最適化し、正しい依存関係を設定することが重要です。これにより、Reactの特性を活かしつつ、より安定したアプリケーションを構築することができます。

参考

タイトルとURLをコピーしました