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

function CounterWithRef() {
  const [count, setCount] = useState(0);
  const clickCountRef = useRef(0);

  function handleClick() {
    clickCountRef.current = clickCountRef.current + 1;
    setCount(count + 1);
  }

  return (
    <div>
      <p>State count: {count}</p>
      <p>Ref click count: {clickCountRef.current}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

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

export default App;

/*
  Notes:
  - Both numbers always match because they're updated together in the
    same handler, but only setCount actually causes the re-render that
    makes the new values visible on screen.
  - If clickCountRef were updated WITHOUT also calling setCount
    somewhere, its displayed value would be stuck on whatever it was
    during the last render caused by something else — a direct
    demonstration of refs not triggering renders on their own.
*/