UseEffect 初期レンダリングをスキップし、依存関係の変更後にのみトリガーする方法

うまくやってるといいのですが、useEffect ビットでイライラしているようですが、心配しないで、一緒に修正して問題を解決しましょう。

なぜそうなるのか : 私の useEffect は本当に単純です。依存関係配列の値が変更されるたびに、JSX の後で実行されます。ただし、依存関係配列内のデータが変更されていない場合でも、useEffect がトリガーされる場合があります。これは初期レンダリングが原因で発生します。

解決策 : 私のアプローチはあなたのアプローチとは異なる可能性があります。もし間違いを犯したら教えてください。これはうまくいきますので、詳しく見てみましょう

ステップ 1: 私の場合、componentA.tsx
の 2 つの useref を作成します。 2 つの ref を使用して初期レンダリング動作を制御します:

constskippedInitialRender = useRef(false);
const wasInitialRender = useRef(false);

ステップ 2 : useEffect を作成します

useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])

*ステップ 3 : * if ステートメント内でロジックを実行すると完了です

*Expaination : * 最初のレンダリング中に、setTimeout を使用して実行を遅らせます。これにより、最初のレンダリング中に useEffect が何回トリガーされても (2 回、4 回、またはそれ以上)、ロジックは実行されなくなります。このロジックは、最初のレンダリング後に依存関係の値が再び変更された場合にのみ実行されます。

以上がUseEffect 初期レンダリングをスキップし、依存関係の変更後にのみトリガーする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。