useEffect と ReactStrictMode の使用: パフォーマンスと信頼性のために React コンポーネントを最適化する

Question

課題があります。コンポーネントは非常に重いため、配列の一部を「loadedData」という新しい配列にロードし、ロードされたデータのみを表示したいと考えています。

しかし、useEffect が台無しになっているようで、最初のロード時に多くの問題に遭遇しました。最初のロードは 2 回行われ、最初のデータはレンダリングごとに 1 回配列にプッシュされます。 「reactStrictMode」を削除すると期待どおりに機能しますが、その結果を理解せずに「不正行為」をしたくありません。私よりも問題をよく理解している人が、理由があってこの問題をそこに置いたのです。

isLoading 状態では、初期ロード中の 2 回目の実行を防ぐことはできません。これは、この問題に関連する他のスレッドで私が受け取った提案です。

最初の useEffect が isLoading 状態を無視する理由とそれに対処する方法を知っている人はいますか?

// 表示されている部分をロードしようとしますが、それ以上はロードしないでください
const [loadedData, setLoadedData] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const addMoreData = async () => {
    if (loadedData.length >= data.length) return;

    const startIndex = ロードされたデータ.長さ;
    constpreferredLoadLength = 1;

    const endIndex = startIndexpreferredLoadLength;

    const newData = data.slice(startIndex, endIndex);

    setLoadedData((prev) => [...prev, ...newData]);
};

// データをマウントしてフェッチした後、テーブルが一番下までスクロールされており、すぐにさらにデータをフェッチする必要があるかどうかを確認します
useEffect(() => {
    const {scrollHeight、scrollTop、clientHeight} = tableContainerRef.current;
    もし （
        スクロールハイト == クライアントハイト &&
        スクロールトップ == 0 &&
        ロードされたデータの長さ < データの長さ
    ) {
        const addNewDataFunction = async () => {
            if (isLoading) {
                戻る;
            }
            setIsLoading(true);
            addMoreData() を待ちます;
            setIsLoading(false);
        };
        addNewDataFunction();
    }
    // eslint-disable-next-line 反応フック/網羅的-deps
}, [data.length、loadedData.length、isLoading]);

Answer 1

addMoreData 関数のこの行を変更するだけです

リーリー ＃＃＃のために＃＃＃ リーリー

これにより、現在レンダリングされているときの値に基づいて状態が更新されます。これは、コンポーネントが 2 番目の

useEffect

実行時にまだ再レンダリングされていないため、最初のコンポーネントによって加えられた変更が反映されないためです。がまだ反映されていないため、loadedData はまだ更新されていません。
関数形式を使用して更新する場合、

prev

は状態のリアルタイム値です。開発で厳密モードを使用している場合、この状況が発生するのは通常のことです。 最後に、

isLoading

を削除します。問題の解決には役立ちません。

注:

厳密モー​​ドが有効な場合は、setState 関数形式を使用することをお勧めしますが、useEffect では推奨されません。これは、コンポーネントが有効になっているときにこのフックが実行されるためです。 2回取り付けました。 さらに、依存関係配列に data.length
と loadedData.length を含めると、これらの値の変更がトリガーされたときに useEffect が発生します。 。