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]);