Currently, I am working on developing a versatile infinite scrolling feature using React Hooks along with the ResearchGate React Intersection Observer. The main concept revolves around a parent passing down a mapped JSX array of data and a callback function responsible for fetching more data asynchronously. Once the intersection observer detects that the user has scrolled to reveal the loading icon, it triggers the callback which fetches additional data.
This implementation is functioning adequately, except for one issue: esLint warns me about calling the getMore function (from props) within a useEffect, necessitating it to be a dependency of that effect. However, since the callback in the parent accesses the length of its data array, that array needs to be a dependency of useCallback. Consequently, this callback then modifies the array.
To summarize, I am encountering race conditions leading to multiple asynchronous callback triggers due to changes in the callback function reference being passed down to the caller component unintentionally.
Below is some code snippet for clarification:
The callback in the parent component:
const loadData = useCallback(async () => {
if (hasMore) {
const startAmount = posts.length;
for (let i = 0; i < 20; ++i) {
posts.push(`I am post number ${i + startAmount}.`);
await delay(100);
}
setPosts([...posts]);
setHasMore(posts.length < 100);
}
}, [posts, hasMore]);
The posts and hasMore variables are simply state variables, where posts is passed down as the data array in props to the child component. This function is then passed to the child via props, with the following setup (getMore is the deconstructed prop for the callback, while isLoading is a boolean state variable):
useEffect(() => {
if (isLoading) {
(async () => {
await getMore();
setIsLoading(false);
})();
}
}, [isLoading, getMore]);
I utilize setting isLoading to true to activate the effect; however, it is also triggered by changes in the getMore reference when the parent loads new data causing function memoization. This behavior should not occur. Although I could disable esLint for that specific line, I believe there might be a more optimal solution that I am unaware of and would appreciate some insights on it.