React Hook to Create State and Syndicate to Local Storage

useLocalStorage.js

import { useState, useEffect } from "react";

/**
 * A hook to syndicate and hydrate component state into local storage
 * @param {string} storageKey - the key to store
 * @param {*} [defaultVal] - an initial value for syndication
 */
function useLocalStorage(storageKey, defaultVal = "") {
  let initialVal = window.localStorage.getItem(storageKey);
  if (initialVal) {
    try {
      initialVal = JSON.parse(initialVal);
    } catch (e) {
      initialVal = defaultVal;
      // log error here if needed
    }
  } else {
    initialVal = defaultVal;
  }

  const [value, setValue] = useState(initialVal);

  useEffect(() => {
    const stringifiedVal = JSON.stringify(value);
    if (stringifiedVal) {
      window.localStorage.setItem(storageKey, stringifiedVal);
    }
  }, [value]);

  return [value, setValue];
}

export default useLocalStorage;