React Hook recipe from https://usehooks.com. Demo: https://codesandbox.io/s/qxkr4mplv6

use-local-storage-example.js

import { useState } from 'react';

// Usage
function App() {
  // Similar to useState but first arg is key to the value in local storage.
  const [name, setName] = useLocalStorage('name', 'Bob');

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
}

// Hook
function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = value => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

When using this hook in an application and over time changing the object that is managed it will still return the object from localstorage which will miss the newly added property.
For example on my first day I commit using this hook:

useLocalStorage("example", { test: "hello" })

I deploy this code.
The next day I change the usage of this hook:

useLocalStorage("example", { test: "hello", somethingNew: "this was just added" })

Because I have test: "hello" in my storage, this won't return the initial value for somethingNew.

2 possible solutions:

1. the consumer of this hook should change the storage key every time this is done
2. change return item ? JSON.parse(item) : initialValue; to return item ? { ...initialValue, ...JSON.parse(item)} : initialValue;

There is also the problem when removing an attribute it will still return it, but this might be less problematic.

You can sync the state of localStorage between all tabs that application is opened.
My solution was:

import { useEffect, useState } from "react";

const useLocalStorage = (key, initialValue) => {
    // State to store our value
    // Pass initial state function to useState so logic is only executed once
    const [storedValue, setStoredValue] = useState(() => {
        if (typeof window === "undefined") {
            return initialValue;
        }
        try {
            // Get from local storage by key
            const item = window.localStorage.getItem(key);
            // Parse stored json or if none return initialValue
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            // If error also return initialValue
            console.log(error);
            return initialValue;
        }
    });
    // Return a wrapped version of useState's setter function that ...
    // ... persists the new value to localStorage.
    const setValue = (value) => {
        try {
            // Allow value to be a function so we have same API as useState
            const valueToStore =
                value instanceof Function ? value(storedValue) : value;
            // Save state
            setStoredValue(valueToStore);
            // Save to local storage
            if (typeof window !== "undefined") {
                window.localStorage.setItem(key, JSON.stringify(valueToStore));
            }
        } catch (error) {
            // A more advanced implementation would handle the error case
            console.log(error);
        }
    };

    // Sync localStorage between tabs
    useEffect(() => {
        const listener = (e) => {
            if (e.key === key) {
                setStoredValue(JSON.parse(e.newValue));
            }
        };
        window.addEventListener("storage", listener);
        return () => {
            window.removeEventListener("storage", listener);
        };
    }
        , [
            key,
            initialValue,
        ]);

    return [storedValue, setValue];
};

export default useLocalStorage;

Could we add a custom serialization/deserialization logic?
function useLocalStorage(key, initialValue, serialize = JSON.stringify, deserialize = JSON.parse) {
And use those functions instead of calling JSON.stringify/JSON.parse.