Next.js use localstorage problem with SSR

user_9587232 0
Viewed 7074

I have the following custom hook which stores data in the localstorage:

import { useCallback, useEffect, useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const initialize = (key) => {
    try {
      const item = localStorage.getItem(key);
      if (item && item !== "undefined") {
        return JSON.parse(item);
      }

      localStorage.setItem(key, JSON.stringify(initialValue));
      return initialValue;
    } catch {
      return initialValue;
    }
  };

  const [state, setState] = useState(() => initialize(key)); // problem is here

  const setValue = useCallback(
    (value) => {
      try {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        setState(valueToStore);
        localStorage.setItem(key, JSON.stringify(valueToStore));
      } catch (error) {
        console.log(error);
      }
    },
    [key, setState]
  );

  const remove = useCallback(() => {
    try {
      localStorage.removeItem(key);
    } catch {
      console.log(error);
    }
  }, [key]);

  return [state, setValue, remove];
};

It shows the following problem, which i googled it and it seems it due to the fact that Nextjs tries to run the code on the server side and there is no available window object.

enter image description here

The problem seems to come from the line where i try to initialize the stored data:

const [state, setState] = useState(() => initialize(key));

I tried to pack this logic within a useEffect so it only runs on client side, but i got the infinite loop which i couldnt solve.

server-side-rendering react-hooks next.js reactjs
2 Answers
import { useCallback, useEffect, useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const initialize = (key) => {
    try {
      const item = localStorage.getItem(key);
      if (item && item !== "undefined") {
        return JSON.parse(item);
      }

      localStorage.setItem(key, JSON.stringify(initialValue));
      return initialValue;
    } catch {
      return initialValue;
    }
  };

  const [state, setState] = useState(null); // problem is here

  // solution is here....
  useEffect(()=>{
    setState(initialize(key));
  },[]);

  const setValue = useCallback(
    (value) => {
      try {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        setState(valueToStore);
        localStorage.setItem(key, JSON.stringify(valueToStore));
      } catch (error) {
        console.log(error);
      }
    },
    [key, setState]
  );

  const remove = useCallback(() => {
    try {
      localStorage.removeItem(key);
    } catch {
      console.log(error);
    }
  }, [key]);

  return [state, setValue, remove];
};

window,localStorage,sessionStorage,etc.. are not defined on server, so accessing them on server will result as an error. Use useEffect to make sure that, these code will be executed on client side.

user_147738300

Maybe move the initialize to inside a useEffect (useState needs to be kept outside however)

Inside the useEffect, you initialize only if typeof window !== "undefined"

user_101557600
Related