Utilisation de useEffect et de reactStrictMode : optimisation des composants React pour les performances et la fiabilité

Question

J'ai un défi, je souhaite charger une partie du tableau dans un nouveau tableau appelé "loadedData" et afficher uniquement les données chargées car le composant est très lourd.

Cependant, lors du premier chargement, j'ai rencontré beaucoup de problèmes car useEffect semblait tout gâcher. Le premier chargement se produit deux fois et les premières données sont insérées dans le tableau une fois pour chaque rendu. Si je supprime "reactStrictMode", cela fonctionne comme prévu, mais je ne veux pas "tricher" sans comprendre les conséquences. Quelqu'un qui comprend le problème mieux que moi l'a posé là pour une raison.

L'état isLoading ne peut pas empêcher une seconde exécution lors du chargement initial - c'est une suggestion que j'ai reçue dans d'autres discussions liées à ce problème.

Est-ce que quelqu'un sait pourquoi le premier useEffect ignore l'état isLoading et comment le gérer ?

// Essayez de charger la partie visible, mais n'en chargez pas plus
const [loadedData, setLoadedData] = useState([]);
const [isLoading, setIsLoading] = useState(false);

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

    const startIndex =loadData.length;
    const préféréLoadLength = 1;

    const endIndex = startIndex + PreferredLoadLength ;

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

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

// Vérifiez si le tableau a défilé vers le bas après le montage et la récupération des données et doit immédiatement récupérer plus de données
useEffect(() => {
    const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current;
    si (
        scrollHeight == clientHeight &&
        scrollTop == 0 &&
        chargéData.length <
    ) {
        const addNewDataFunction = async () =>
            si (est en cours de chargement) {
                retour;
            }
            setIsLoading(true);
            attendre addMoreData();
            setIsLoading(faux);
        } ;
        addNewDataFunction();
    }
    // eslint-disable-next-line réagir-hooks/exhaustive-deps
}, [data.length,loadedData.length, isLoading]);

Answer 1

Vous pouvez simplement modifier cette ligne dans la fonction addMoreData

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

pour

setLoadedData([...loadedData, ...newData]);

Cela entraînera la mise à jour de l'état en fonction de la valeur actuelle lors du rendu, car la deuxième fois useEffect运行时组件尚未重新渲染，所以第一个组件所做的更改尚未反映出来，因此loadedData il n'a pas encore été mis à jour.

Lorsque vous mettez à jour en utilisant le formulaire fonctionnel, prev est la valeur live de l'état, il est normal que vous rencontriez cela lors de l'utilisation du mode strict en développement.

Enfin, débarrassez-vous de isLoading, cela n'aidera pas à résoudre le problème.

Remarque : L'utilisation de la forme fonctionnelle de setState est plus recommandée lorsque le mode strict est activé, mais n'est pas recommandée dans useEffect car ce hook s'exécutera deux fois lorsque le composant est monté.
De plus, lorsque vous incluez data.length et loadedData.length dans votre tableau de dépendances, cela entraînera le déclenchement de data.length和loadedData.length时，这将使useEffect chaque fois que l'une de ces valeurs change.