Veo muchas preguntas sobre useEffect y debounce, pero este caso de uso es un poco diferente. Estaba teniendo algunos problemas con fetchBookList que no tenía acceso a las variables de estado en el mismo componente y resulta que en el montaje esa función solo tiene acceso al estado "obsoleto", de ahí esto:

 useEffect(() => { const handleScroll = () => { if (Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight) { fetchBookList(); } } window.addEventListener('scroll', handleScroll, { passive: true }); return () => { window.addEventListener('scroll', handleScroll); } }, [bookList, bookType])

Volver a crear handleScroll no es la solución óptima, pero funciona. El problema es que, con este código, cuando el usuario toca la parte inferior de la pantalla, no hay limitación en el lugar, por lo que, en lugar de buscar solo una vez, se realizan varias llamadas en un instante, ya que la ventana gráfica puede estar o no en la parte inferior de la pantalla. .

En este caso particular, ¿cómo se hace para eliminar el rebote de la llamada fetchBookList para que solo se active una vez cada segundo como máximo?