A small experiment on how a persisted state hook good be implemented

persisted-hooks.js

import React, { useState } from "react";
import ReactDOM from "react-dom";

const usePersistedState = (initialState, key) => {
  // Check if we have a value stored
  let value = localStorage.getItem(key);
  if (!value) {
    value = initialState;
  } else {
    value = JSON.parse(value);
  }

  const [state, setState] = useState(value);

  const newSetState = newValue => {
    localStorage.setItem(key, JSON.stringify(newValue));
    setState(newValue);
  };

  return [state, newSetState];
};

const App = () => {
  const [count, setCount] = usePersistedState(0, "myKey");

  return (
    <div>
      <h1>Hello</h1>
      <p>{`You've clicked ${count} times`}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));