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

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

React では、useEffect フックは、componentDidUpdate ライフサイクル メソッドと同様の機能を提供します。ただし、componentDidUpdate とは異なり、useEffect は最初のレンダリングを含むすべてのレンダリング後に実行されます。これは、後続の更新後にのみエフェクトを実行したい場合には望ましくない動作となる可能性があります。

最初のレンダリングで useEffect が実行されないようにするには、次の 2 つのアプローチを活用できます。

Using useRef フック

useRef フックを使用すると、レンダリング間で持続する可変値を保存できます。これを使用して、 useEffect 関数が初めて呼び出されたかどうかを追跡できます。

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

  // Run the effect after the initial render
  console.log("useEffect ran after first render");
}, []);

useLayoutEffect フックを使用する

あるいは、useLayoutEffect を使用することもできます。フック。 useEffect とは異なり、useLayoutEffect は DOM 更新が発生した後に同期的に実行されます。これは、componentDidUpdate と同じ動作です。

useLayoutEffect(() => {
  // Run the effect after the initial render
  console.log("useLayoutEffect ran after first render");
}, []);

これらのアプローチは、最初のレンダリングで useEffect が実行されるのを効果的に防ぎ、効果が後続のレンダリング後にのみ発生するようにします。更新 (componentDidUpdate.

と同様)

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