What causes stale closures in React hooks, and how do you fix them correctly?

import { useState, useEffect } from 'react';

export default function App() {
  const [correct, setCorrect] = useState(0);
  const [buggy, setBuggy] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setBuggy(buggy + 1);        // STALE: captures buggy=0 forever -> sticks at 1
      setCorrect((c) => c + 1);   // CORRECT: functional update reads latest
    }, 1000);
    return () => clearInterval(id);
  }, []); // empty deps on purpose, to expose the stale closure

  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <p>Functional update (climbs): <b>{correct}</b></p>
      <p>Stale closure (stuck at 1): <b>{buggy}</b></p>
    </div>
  );
}