Custom useLocalStorage hook for Next.js

use-local-storage.js

// Based on https://usehooks.com/useLocalStorage/, modified to be used with
// Next.js' server-side rendering components.

import { useState } from "react";

export default function useLocalStorage(key, initialValue) {

   // There is no need to pass the inital value here as this will be executed on
   // the server side, so window.localStorage is not available.
   const [stateValue, setStateValue] = useState()

   // Wraps useState's setter function, and persists the new value to
   // localStorage when executed.
   const setValue = newValue => {
      setStateValue(newValue)
      window.localStorage.setItem(key, JSON.stringify(newValue));
   }

   // Define an init function to be used in useEffect so that's it's executed on
   // the client-side where localStorage is available.
   // If the localStorage value is null then it is initialized, if it's not then
   // the state is updated with this value.
   //
   // useEffect must be used with empty dependencies, i.e. useEffect(…, [])
   const initValue = () => {
      const currentValue = window.localStorage.getItem(key)
      if (currentValue === null) {
         window.localStorage.setItem(key, initialValue)
      }
      else {
         setStateValue(currentValue)
      }
   }

   return [stateValue, setValue, initValue];
}