How to fix invalid JSON in useLocalStorage in React project?

Question

In the dev tools I am getting this error "Error reading value for key auth: "undefined" is not valid JSON". The console show me this as full errors

enter image description here

useLocalStorage code last version is this

import { useState, useEffect } from "react";

export const useLocalStorage = (key, defaultValue) => {
  if (typeof window === 'undefined') {
    throw new Error("useLocalStorage hook can only be used in a browser environment.");
  }

  if (!key || typeof key !== "string") {
    throw new Error("Invalid key for useLocalStorage hook.");
  }

  const [value, setValue] = useState(() => {
    try {
      const storedValue = localStorage.getItem(key);

      if (storedValue !== undefined && storedValue !== null) {
        return JSON.parse(storedValue);
      } else {
        return defaultValue;
      }
    } catch (error) {
      console.error(`Error reading value for key ${key}: ${error.message}`);
      return defaultValue;
    }
  });

  useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.key === key) {
        try {
          const newValue = JSON.parse(event.newValue);
          setValue(newValue);
        } catch (error) {
          console.error(`Error parsing new value for key ${key}: ${error.message}`);
        }
      }
    };

    window.addEventListener("storage", handleStorageChange);
    
    return () => {
      window.removeEventListener("storage", handleStorageChange);
    };
  }, [key]);

  const setLocalStorageValue = (newValue) => {
    if (newValue === undefined || newValue === null) {
      throw new Error("Invalid value for useLocalStorage hook.");
    }
    try {
      localStorage.setItem(key, JSON.stringify(newValue));
      setValue(newValue);
    } catch (error) {
      console.error(`Error setting value for key ${key}: ${error.message}`);
    }
  };

  const clearLocalStorageValue = () => {
    try {
      localStorage.removeItem(key);
      setValue(defaultValue);
    } catch (error) {
      console.error(`Error clearing value for key ${key}: ${error.message}`);
    }
  };

  return [value, setLocalStorageValue, clearLocalStorageValue];
};

The AuthContext and AuthProvider is this:

import { createContext, useContext } from "react";
import { useLocalStorage } from "../hooks/useLocalStorage";

const initialState = {
  _id: '',
  name: '',
  email: '',
  accessToken: '',
};

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useLocalStorage('auth', initialState);

  const userLogin = (authData) => {
    setAuth(authData);
  };

  const userLogout = () => {
    setAuth(initialState);
  };

  return (
    <AuthContext.Provider value={{
        user: auth,
        userLogin,
        userLogout,
        isAuth: auth.name,
    }}>
        {children}
    </AuthContext.Provider>
  )
}

export const useAuthContext = () => {
   const authState = useContext(AuthContext);

   return authState;
}

I try to fixed the issue by changing adding if statemenst. This my prevoius code:

import { useState, useEffect } from "react";
 
export const useLocalStorage = (key, defaultValue) => {
  if (!key || typeof key !== "string") {
    throw new Error("Invalid key for useLocalStorage hook");
  }
 
  const [value, setValue] = useState(() => {
    try {
      const storedValue = localStorage.getItem(key);
      return storedValue !== undefined && storedValue !== null ? JSON.parse(storedValue) : defaultValue;
    } catch (error) {
      console.error(`Error reading value for key ${key}: ${error.message}`);
      return defaultValue;
    }
  });
 
  useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.key === key) {
        try {
          const newValue = JSON.parse(event.newValue);
          setValue(newValue);
        } catch (error) {
          console.error(`Error parsing new value for key ${key}: ${error.message}`);
        }
      }
    };
 
    window.addEventListener("storage", handleStorageChange);
 
    return () => {
      window.removeEventListener("storage", handleStorageChange);
    };
  }, [key]);
 
  const setLocalStorageValue = (newValue) => {
    if (!newValue) {
      throw new Error("Invalid value for useLocalStorage hook");
    }
    try {
      localStorage.setItem(key, JSON.stringify(newValue));
      setValue(newValue);
    } catch (error) {
      console.error(`Error setting value for key ${key}: ${error.message}`);
    }
  };
 
  return [value, setLocalStorageValue];
};

The verification for the undefined and null with if statements did not fixed this isssue. Not sure why i am still getting this issue. Could you help me, please?

Answer 1

Try wrapping the name of the localstorage variable in quotes
e.g.

try {
  localStorage.setItem("key", JSON.stringify(newValue));
  setValue(newValue);
}