use-local-storage-example.js

import { useState } from 'react';

// Usage
function App() {
  const [name, setName] = useLocalStorage('name', '');

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

// Hook
function useLocalStorage(key, initialValue) {
  // The initial state we pass to useState should come from ...
  // ... local storage if a value has been set.
  const initialState =
    window.localStorage.getItem(key) !== null
      ? window.localStorage.getItem(key)
      : initialValue;

  const [item, setValue] = useState(initialState);

  // Updates both our state and local storage
  const setItem = item => {
    setValue(item);
    window.localStorage.setItem(key, item);
  };

  return [item, setItem];
}