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

React の useEffect フックを使用して最初のレンダリング実行を回避する

クラスベースの React コンポーネントのcomponentDidUpdate() ライフサイクル メソッドは、レンダリングのたびに呼び出されます。初期のものを除いて。 useEffect フックを使用してこの動作をエミュレートするには、初回を含むすべてのレンダリングでフックが実行されているように見える場合があります。

解決策

useEffect の実行を防ぐには最初のレンダリング時に useRef フックを利用すると、それがエフェクトの最初の呼び出しであるかどうかを追跡するのに役立ちます。

さらに、 「レイアウト効果」フェーズで実行される、componentDidUpdate の動作を模倣するには、useEffect の代わりに useLayoutEffect を使用することを検討してください。

例

const { useState, useRef, useLayoutEffect } = React;

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

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

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

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

このアプローチでは、useRef を使用します。最初の更新を追跡するフックを使用して、後続の更新中にのみ効果が実行されるようにし、クラスベースのcomponentDidUpdateの動作をミラーリングします。コンポーネント。

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