Estoy consumiendo una API y devuelve una matriz con una longitud de 370. Quiero comenzar a renderizar solo 15, y luego, cuando el usuario se desplace hacia abajo, renderice más 15, y así sucesivamente... PD: La parte de obtener la altura de la ventana gráfica está bien, ya sé cómo hacerlo. Por lo tanto, concéntrese solo en la función de renderizado React. Eso es lo que tengo hasta ahora, renderizando los primeros 15 elementos:

 export const GamesPage = () => { const [data, setData] = useState([]); async function getData() { const options = { method: 'GET', url: 'https://free-to-play-games-database.p.rapidapi.com/api/games', params: { 'sort-by': 'popularity' }, headers: { 'X-RapidAPI-Host': 'free-to-play-games-database.p.rapidapi.com', 'X-RapidAPI-Key': 'MY_KEY', }, }; axios .request(options) .then(function (response) { setData(response.data); }) .catch(function (error) { console.error(error); }); } useEffect(() => { getData(); }, []); const renderList = () => { let reducedArray = []; for (let i = 0; i < 15; i++) { reducedArray.push(data[i]); } return reducedArray.map(game => ( <Col key={game.id} sm={12} md={3} lg={3}> <a className='link' href={game.game_url}> <Card className='shadow grow bg-dark mb-4'> <Card.Img src={game.thumbnail} /> <Card.Body> <Card.Title> <p className='c-limit'>{game.title}</p> <span className='float-right badge'>Free</span> </Card.Title> </Card.Body> </Card> </a> </Col> )); }; return ( {data.length && renderList()} ) }