LocalStorage does not save after page refresh (React context)-CodePudding

I am developing a context in which through a function I can send "pokemons" to a global array, and also send the information of this array to my localstorage so that it is saved in the browser, I managed to do that and the array items are in localstorage, but every time the site refreshes, localstorage goes back to the empty array.

import React, { useEffect, useState } from "react";
import CatchContext from "./Context";


const CatchProvider = ({ children }) => {
    const [pokemons, setPokemons] = useState([], () => {
        const dataStorage = localStorage.getItem('pokemons');

        if (dataStorage) {
            return JSON.parse(dataStorage)
        } else {
            return [];
        }
    });
    
    useEffect(() => {
        localStorage.setItem('pokemons', JSON.stringify(pokemons));
    }, [pokemons]);

    const updatePokemons = (name) => {  
        const updatedPokemons = [...pokemons]; 
        const pokemonsIndex = pokemons.indexOf(name);
        if (pokemonsIndex >= 0) { 
            updatedPokemons.slice(pokemonsIndex, 1)    
        } else { 
            updatedPokemons.push(name) 
        };
        setPokemons(updatedPokemons) 
    }     
  
    const deletePokemon = async (name) => {   
      await pokemons.splice(pokemons.indexOf(toString(name)))
    }  


    return (
        <CatchContext.Provider value={{ pokemons: pokemons, updatePokemons: updatePokemons, deletePokemon: deletePokemon }}>
            {children}
        </CatchContext.Provider>
    );
}

export default CatchProvider;

CodePudding user response：

The problem is that useState doesn't take two arguments.

Instead of:

const [pokemons, setPokemons] = useState([], () => {

You want:

const [pokemons, setPokemons] = useState(() => {

CodePudding user response：

I think you don't need to call useEffect on initial render so you can make use of refs for this

import { useEffect, useRef } from "react";

// other code....


const didMount = useRef(false);

 useEffect(() => {
       if (didMount.current) {
        localStorage.setItem('pokemons', JSON.stringify(pokemons));
       } else {
      didMount.current = true;
      }
    }, [pokemons]);