Estoy haciendo una aplicacion en next.js que muestra un lista de juegos obtenidos a traves de una api, pero la peticion se queda en un bucle infinito llamando a cada rato dicha api lo que relentiza mi aplicacion en el, la peticion esta bien hecha, el detalle esta que cuando hago la peticion en el useContext, se queda en dicho bucle infinito, en el lugar donde se muestran los datos tiene un infinite scroll y la peticion se hace en el useContext, me gustaria que me ayudaran a resolver dicho bucle por favor
El useContext
import React, { useReducer } from "react";
import GameReducer from "./GameReducer";
import GameContext from "./GameContext";
import { fetchGames } from "@/app/services/Games";
function GameState({ children }) {
const initialState = {
games: [],
selectedGame: null,
};
const [state, dispatch] = useReducer(GameReducer, initialState);
const getGames = () => {
const gamesData = fetchGames();
dispatch({
type: "GET_GAMES",
payload: gamesData,
});
};
const getGame = (index) => {
dispatch({
type: "GET_GAME",
payload: state.games[index],
});
};
return (
<GameContext.Provider
value={{
games: state.games,
selectedGame: state.selectedGame,
getGames,
getGame,
}}
>
{children}
</GameContext.Provider>
);
}
export default GameState;
Y el contenedor que genera la lista de juegos
"use client";
import React, { useContext, useEffect, useState } from "react";
import { useRef } from "react";
import GameCard from "../card/GameCard";
import GameContext from "@/app/context/games/GameContext";
function GameContainer() {
const [visible, setVisible] = useState(false);
const [load, setLoad] = useState(12);
const limit = useRef(null);
const { games, getGames } = useContext(GameContext);
getGames();
useEffect(() => {
const oberver = new IntersectionObserver(
([entry]) => {
setVisible(entry.isIntersecting);
},
{
rootMargin: "0px",
}
);
oberver.observe(limit.current);
return () => oberver.disconnect();
}, []);
useEffect(() => {
if (visible) {
setLoad((load) => load + 12);
}
}, [visible]);
return (
<section className="GameSection">
<div className="GameContainer">
{games.slice(0, load).map((game, index) => (
<GameCard key={index} game={game} index={index} />
))}
</div>
<div ref={limit}></div>
</section>
);
}
export default GameContainer;