I have a challenge, I want to load a part of the array into a new array called "loadedData" and only display the loaded data because the component is very heavy.

However, on first load, I ran into a lot of problems because useEffect seemed to mess it up. The first load happens twice, and the first data is pushed into the array once for each render. If I remove "reactStrictMode" it works as expected, but I don't want to "cheat" without understanding the consequences. Someone who understands the problem better than me put it there for a reason..

The isLoading state cannot prevent a second run during the initial load - this is a suggestion I've received in other threads related to this issue.

Does anyone know why the first useEffect ignores the isLoading state and how to deal with it?

// Try to load the visible part, but don't load more const [loadedData, setLoadedData] = useState([]); const [isLoading, setIsLoading] = useState(false); const addMoreData = async () => { if (loadedData.length >= data.length) return; const startIndex = loadedData.length; const preferredLoadLength = 1; const endIndex = startIndex preferredLoadLength; const newData = data.slice(startIndex, endIndex); setLoadedData((prev) => [...prev, ...newData]); }; // Check if the table has been scrolled to the bottom after mounting and fetching data and immediately needs to fetch more data useEffect(() => { const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current; if ( scrollHeight == clientHeight && scrollTop == 0 && loadedData.length < data.length ) { const addNewDataFunction = async () => { if (isLoading) { return; } setIsLoading(true); await addMoreData(); setIsLoading(false); }; addNewDataFunction(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [data.length, loadedData.length, isLoading]);