Explain Stale closures and how we can fix it.

stale_closures_react.jsx

const { useEffect } = require("react");

// Suffers from Stale Closures
export function useUpdatedExit(props) {
  // initial = 0, latest = 0
  // initial = 0, latest = 1
  // initial = 0, latest = 2
  const { initial, latest, cb } = props;

  function handleExit() {
    // initial = 0, latest = 0
    if (initial !== latest) {
      cb();
    }
  }

  useEffect(() => {
    // initial = 0, latest = 0
    return () => {
      // initial = 0, latest = 0
      handleExit();
    }
  }, []);
}

// Using Ref to work-around Stale Closures
export function useUpdatedExit(props) {
  // initial = 0, latest = 0
  // initial = 0, latest = 1
  // initial = 0, latest = 2
  const { initial, latest, cb } = props;
  const latestHandlerRef = useRef();

  function handleExit() {
    // initial = 0, latest = 2
    if (latest !== initial) {
      cb(latest);
    }
  }

  useEffect(() => {
    latestHandlerRef.current = handleExit;
  });
  
  useEffect(() => {
    // initial = 0, latest = 0
    return () => {
      // initial = 0, latest = 0
      latestHandlerRef.current();
    }
  }, []);
}