// src/App.jsx
import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

function PersistentCounter() {
  const [count, setCount] = useLocalStorage("counter", 0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

function App() {
  return <PersistentCounter />;
}

export default App;

/*
  Notes:
  - useLocalStorage is used exactly like useState — PersistentCounter
    has no idea persistence is happening behind the scenes.
  - The useState initializer is a function (() => {...}), so reading
    localStorage only happens once, on the first render, not on every
    re-render caused by clicking the buttons.
*/