useLocalStorage.js - React custom hook that inherits useState functionality and store value on browser local storage. Needs a key to be passed together with the value.

useLocalStorage.js

import { useState, useEffect } from "react";

// get already saved value from local storage
function getSavedValue(key, initialValue) {
  //retrieve value from local storage 
  const savedValue = JSON.parse(localStorage.getItem(key));
  
  //check if a value for that key already exists
  if (savedValue) return savedValue;
  
  //since useState can receive a function with check for it in the initial value
  if (initialValue instanceof Function) return initialValue();
  
  //otherwise returns the initial value
  return initialValue;
}

export default function useLocalStorage(key, initialValue) {
  //first thing first is to save the key:value in the state using useState
  const [value, setValue] = useState(() => {
    return getSavedValue(key, initialValue);
  });

  //every time 'value' changes save value to localstorage
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);

  return [value, setValue];
}