0

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;
2
  • Yo estoy igual, no sé si has podido resolver, yo he empezado recientemente con react. Saludos Commented el 20 jun. 2023 a las 17:32
  • 1
    No lo tendrás en github?, o es algo privado?
    – JoseMgz_Ux
    Commented el 28 jun. 2023 a las 16:17

1 respuesta 1

0

Tu error se debe a que estas ejecutando la función getGames() en el componente, hay que tener en cuenta que en react cada vez que se actualiza el estado de un componente o contexto, el componente y sus hijos se van a renderizar de nuevo, por lo cual se va a volver a ejecutar getGames() y asi sucesivamente, lo mejor es usar useEffect si es que quieres que se llame la primera vez solamente esa función

useEffect(() => {
  getGames()
},[])

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.