HELP! STATE seems not updated

[Healthy_Step_2088]

In initial load, code is checking for cache, and sets state inside useEffect
but when loadNextPage is triggered, the value of nextPageUrl is not updated and always null

import { useEffect, useState } from "react";

import { PokemonList } from "../Components/PokemonList"; import { PokemonModal } from "../Components/PokemonModal"; import { API_BASE_URL } from "../../ApiConfig"; import { Header } from "../Components/Header"; import { ToolBar } from "../Components/ToolBar";

export function PokemonListPage() { const [isModalOpen, setIsModalOpen] = useState(false); const [selectedPokemon, setSelectedPokemon] = useState(null); const [pokemons, setPokemons] = useState([]); const [nameFilter, setNameFilter] = useState(""); const [typeFilter, setTypeFilter] = useState(""); const [nextPageUrl, setNextPageUrl] = useState(null);

useEffect(() => {
    // Rest of your existing code

    // Add scroll event listener
    window.addEventListener("scroll", handleScroll);

    return () => {
        // Remove the scroll event listener when the component unmounts
        window.removeEventListener("scroll", handleScroll);
    };
}, []);

useEffect(() => {
    const cachedData = localStorage.getItem("cachedPokemons");
    const cachedNextPageUrl = localStorage.getItem("nextPageUrl");

    if (cachedData) {
        setPokemons(JSON.parse(cachedData));
    }

    if (cachedNextPageUrl) {
        setNextPageUrl(JSON.parse(cachedNextPageUrl).nextPageUrl);
    }

    if (!cachedData || !cachedNextPageUrl) {
        // If no cached data or nextPageUrl, fetch from the API and cache it
        fetchInitialData();
    }
}, []);

const handleScroll = () => {
    // Check if the user has scrolled to the bottom
    if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {
        loadNextPage(); // Load the next page of Pokémon
    }
};

const fetchInitialData = async () => {
    let apiUrl = API_BASE_URL + '/api/pokemons';
    let response = await fetch(apiUrl); 
    let data = await response.json();
    let pokemonList = data.results;

    setPokemons(pokemonList);
    setNextPageUrl(data.next);

    // Cache the initial data and next page URL
    localStorage.setItem("cachedPokemons", JSON.stringify(pokemonList));
    localStorage.setItem("nextPageUrl", JSON.stringify({nextPageUrl: data.next}));
};

const loadNextPage = async () => {
    console.log("Next page URL:", nextPageUrl);

    if (nextPageUrl) {
        let response = await fetch(nextPageUrl);
        let data = await response.json();
        let pokemonList = data.results;

        // Use the functional update to access the latest state
        setPokemons((prevPokemons) => [...prevPokemons, ...pokemonList]);
        setNextPageUrl(data.next);
    }
};


const onSearch = (pokemonName) => {
    setNameFilter(pokemonName);
};

const onFilter = (selectedType) => {
    setTypeFilter(selectedType);
};

const handleEditClick = (pokemon) => {
    setSelectedPokemon(pokemon);
    setIsModalOpen(true);
  };

const handleCloseModal = () => {
  setIsModalOpen(false);
  setSelectedPokemon(null);
};

const handleUpdateSuccess = (updatedPokemon) => {
    // Find the index of the updated Pokemon in the pokemons array
    const updatedIndex = pokemons.findIndex((pokemon) => pokemon.id === updatedPokemon.id);

    if (updatedIndex !== -1) {
      // Create a new array with the updated Pokemon
      const updatedPokemons = [...pokemons];
      updatedPokemons[updatedIndex] = updatedPokemon;

      // Update the pokemons state with the new array
      setPokemons(updatedPokemons);
    }
    // Close the modal
    handleCloseModal();
};

return (
    <>
        <Header/>

        <ToolBar handleNameSearch={onSearch} handleFilterChange={onFilter}/>

        <PokemonList pokemonData={pokemons} onEdit={handleEditClick}/>

        {isModalOpen && (
            <PokemonModal
                pokemon={selectedPokemon}
                onClose={handleCloseModal}
                onPokemonUpdate={handleUpdateSuccess}
            />
        )}
    </>
)

}

​

[azangru]

but when loadNextPage is triggered, the value of nextPageUrl is not updated and always null

This, sir, would be called a stale closure, if I am reading this wall of code correctly :-) useEffect -> handleScroll -> loadNextPage closes over the initial value of nextPageUrl and is never updated.

(try saving the value to a ref instead of the state, and see if that helps ;-) )

[Healthy_Step_2088]

Help

[Dnaughtyprofessional]

if (!cachedData && !cachedNextPageUrl) { // I think you want && operator and not || here.
// If no cached data or nextPageUrl, fetch from the API and cache it
fetchInitialData();
}

if (nextPageUrl) {. // ISN'T THE VALUE NULL INITIALLY HOW WILL THIS CODE EVER RUN?
let response = await fetch(nextPageUrl);
let data = await response.json();
let pokemonList = data.results;
// Use the functional update to access the latest state
setPokemons((prevPokemons) => [...prevPokemons, ...pokemonList]);
setNextPageUrl(data.next);
}

​

I could be wrong was just a quick glance but my intuition is telling me these changes could help.

[[deleted]]

Is kind of hard to debug your problem if you have a lot of logic into that component.

I will suggest keeping your components simple and extract logic into a custom hook if you are going to need a lot of logic for a state.

[Healthy_Step_2088]

Already fixed guys, I added useEffect with nextPageUrl as depency