React useEffect フックが最初のレンダリングで実行されないようにする方法は?

初期レンダリングで React useEffect フックが実行されないようにする

useEffect フックは、React コンポーネントの副作用を管理するための貴重なツールです。ただし、デフォルトでは、最初のレンダリングを含むすべてのレンダリング後に実行されます。コード例で示すように、これにより望ましくない動作が発生する可能性があります。これを克服するには、2 つの効果的な戦略があります。

1. useRef フックを使用して初期レンダリングを追跡する

useRef フックを使用すると、再レンダリング後も保持される変更可能な値を保存できます。これを活用することで、useEffect 関数が初めて実行されたかどうかを追跡できます。

例:

const { useState, useRef, useEffect } = React;

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

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

  return (
    <div>
      <p>useEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

2. useLayoutEffect フックの利用

useLayoutEffect フックは、実行フェーズの観点から、componentDidUpdate の動作をシミュレートするために導入されています。ブラウザがペイントする前に実行され、視覚的な不具合を防ぎます。

例:

const { useState, useLayoutEffect } = React;

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

  return (
    <div>
      <p>useLayoutEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

以上がReact useEffect フックが最初のレンダリングで実行されないようにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。