Estoy obteniendo datos de intercambios criptográficos de mi colección en firestore. Al hacer clic en el botón Cargar más, estoy cargando con éxito más datos, por lo tanto, la consulta no es el problema aquí. Quiero ejecutar la función cuando el usuario se desplaza hacia abajo. Aquí está mi consulta:

 const tradesRef = firebase .firestore() .collection("cex-trades") .orderBy("time", "desc") .limit(16);

Aquí está la carga de datos inicial cuando se monta el componente:

 useEffect(() => { tradesRef.get().then((collections) => { const tradesData = collections.docs.map((trade) => trade.data()); const lastDoc = collections.docs[collections.docs.length - 1]; setTrades(tradesData); setLastTrades(lastDoc); }); setDataLoading(false); }, []);

Cuando se carga la página, las primeras 16 operaciones se cargan en la pantalla. Tengo un botón Obtener más que carga las próximas 16 operaciones y así sucesivamente. La función buscar más:

 const fetchMore = () => { tradesRef .startAfter(lastTrades) .get() .then((collections) => { const tradesData = collections.docs.map((trade) => trade.data()); const lastDoc = collections.docs[collections.docs.length - 1]; setTrades((listOfTrades) => [...listOfTrades, ...trades]); setLastTrades(lastDoc); }); };

No quiero que los usuarios hagan clic en el botón para cargar las próximas operaciones. Las siguientes transacciones deben cargarse cuando el usuario llegue al final de la página desplazándose. ¿Cómo puedo lograr esto a través de React?