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

function ClickTracker() {
  const [clickCount, setClickCount] = useState(0);
  const [lastClicked, setLastClicked] = useState("never");

  function handleClick() {
    setClickCount(clickCount + 1);
    setLastClicked(new Date().toLocaleTimeString());
  }

  return (
    <div>
      <p>Clicks: {clickCount}</p>
      <p>Last clicked: {lastClicked}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

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

export default App;

/*
  Notes:
  - clickCount and lastClicked are two completely independent
    useState calls, each with its own setter.
  - handleClick calls both setters one after another in the same
    function — React batches these together into a single re-render
    rather than re-rendering twice.
*/