Tengo esta aplicación que cuando el usuario llega cerca de la parte inferior de la pantalla, se obtiene contenido nuevo de la API en el método de desplazamiento infinito.

Pero si este usuario se desplaza demasiado rápido o simplemente sigue desplazándose hacia abajo mientras se obtiene contenido nuevo, la función se activa varias veces y esto hace que la aplicación obtenga el mismo contenido dos veces y, por lo tanto, obtenga errores sobre reacciones de niños que tienen las mismas teclas.

Esta es la funcionalidad que detecta cuando el usuario está cerca de la parte inferior:

 const [isFetching, setIsFetching] = useState(false); // Fire Upon Reaching the Bottom of the Page const handleScroll = () => { if ( window.innerHeight + Math.max( window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop ) > document.documentElement.offsetHeight - 100 ) { setIsFetching(true); } else { return; } }; // Debounce the Scroll Event Function and Cancel it When Called const debounceHandleScroll = debounce(handleScroll, 500); useEffect(() => { window.addEventListener("scroll", debounceHandleScroll); return () => window.removeEventListener("scroll", debounceHandleScroll); }, [debounceHandleScroll]); debounceHandleScroll.cancel();

Y esta es la funcionalidad responsable de despachar la acción:

 // Get More Posts const loadMoreItems = useCallback(() => { dispatch(getMorePosts(moreApiAddress)); setIsFetching(false); }, [dispatch, moreApiAddress]); useEffect(() => { if (!isFetching) return; loadMoreItems(); }, [isFetching, loadMoreItems]);

¿Cómo puedo evitar que la función se llame varias veces cuando el usuario se desplaza demasiado rápido mientras se recupera el contenido?