getDerivedStateFromProps メソッドの代わりに useState フックを使用する

2024-04-02

React Strictモードでコンポーネントが2回レンダリングされる問題

React 18で導入されたStrictモードは、開発者のミスを発見しやすくなるように、Reactの動作をより厳格にする機能です。しかし、Strictモードによってコンポーネントが2回レンダリングされる問題が発生する場合があります。

原因

Strictモードでは、以下の2つのライフサイクルメソッドが追加されます。

getDerivedStateFromProps
shouldComponentUpdate

これらのメソッドは、コンポーネントのレンダリングを制御するために使用されます。

解決策

以下の方法で問題を解決できます。

getDerivedStateFromProps メソッドは、コンポーネントのpropsが更新されたときに、stateを更新するために使用されます。Strictモードでは、このメソッドが2回呼び出されます。

この問題を解決するには、getDerivedStateFromProps メソッドを使用せず、代わりにuseState フックを使用します。

shouldComponentUpdate メソッドは、コンポーネントのpropsまたはstateが更新されたときに、コンポーネントを再レンダリングするかどうかを決定するために使用されます。

Strictモードでは、このメソッドが2回呼び出されます。そのため、このメソッドを正しく実装しないと、コンポーネントが2回レンダリングされる可能性があります。

この問題を解決するには、shouldComponentUpdate メソッドを正しく実装し、コンポーネントが実際に再レンダリングする必要がある場合のみtrueを返すようにします。

Strictモードを無効にする

開発環境では、Strictモードを無効にして問題を解決することもできます。

ただし、Strictモードは開発者のミスを発見しやすくなるようにする重要な機能なので、本番環境では有効にする必要があります。

上記以外にも、問題を解決するための方法はいくつかあります。詳細は、上記の参考資料を参照してください。

補足

Strictモードは、React 18で導入された新しい機能です。
Strictモードは、開発者のミスを発見しやすくなるようにする機能です。
Strictモードによって、コンポーネントが2回レンダリングされる問題が発生する場合があります。
上記の解決策を参考に、問題を解決してください。

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  useEffect(() => {
    console.log("useEffect");
  }, []);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

このコードを実行すると、コンポーネントが2回レンダリングされることがわかります。

useEffect
useEffect
カウント: 0
カウント: 1

問題解決

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

カウント: 0
カウント: 1

Strictモードでコンポーネントが2回レンダリングされる問題を解決する他の方法

useMemo フックは、値をキャッシュして再レンダリングを削減するために使用できます。

import React, { useState, useMemo } from "react";
import ReactDOM from "react-dom";

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

  const expensiveComputation = () => {
    console.log("expensiveComputation");
    return Math.random();
  };

  const memoizedValue = useMemo(expensiveComputation, []);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{memoizedValue}</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

このコードでは、expensiveComputation 関数は、useMemo フックによってキャッシュされます。そのため、count が更新されても、expensiveComputation 関数は再実行されません。

useRef フックは、値を可変的に保持するために使用できます。

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";

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

  const previousCountRef = useRef();

  useEffect(() => {
    if (previousCountRef.current !== count) {
      console.log("useEffect");
    }

    previousCountRef.current = count;
  }, [count]);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

このコードでは、previousCountRef 変数は、useRef フックによって保持されます。そのため、count が更新されても、useEffect フックは最初のレンダリング時のみ実行されます。

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  shouldComponentUpdate(nextProps) {
    return this.props.count !== nextProps.count;
  }

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

このコードでは、shouldComponentUpdate メソッドは、count のみが更新された場合にのみtrueを返します。

Strictモードを無効にする

import React, { useState } from "react";
import ReactDOM from "react-dom";

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

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement, { strictMode: false });