import { useRef, useEffect } from 'react';

function usePrevious(value) {
  // Create a ref that will store the previous value
  const ref = useRef();

  // Store current value in ref after render
  // This effect runs AFTER the component renders, so ref.current will still hold
  // the value from the *previous* render initially.
  useEffect(() => {
    ref.current = value;
  });

  // Return the previous value (from the ref before this render)
  return ref.current;
}

// Usage example:
// function Counter() {
//   const [count, setCount] = useState(0);
//   const prevCount = usePrevious(count);

//   return (
//     <div>
//       <p>Current: {count}</p>
//       <p>Previous: {prevCount !== undefined ? prevCount : 'N/A'}</p>
//       <button onClick={() => setCount(count + 1)}>Increment</button>
//       <button onClick={() => setCount(count - 1)}>Decrement</n//       </button>
//     </div>
//   );
// }