Queueing updates

The answer to the exercise in Queueing updates.

All three setWatchedCount(watchedCount + 1) calls read 0. An updater receives the latest queued number, so three of them take the heading from 0 to 3.

import { useState } from "react";
import "./styles.css";
import ShowCard from "./ShowCard";

export default function App() {
  const [watchedCount, setWatchedCount] = useState(0);

  function handlePlusOne() {
    setWatchedCount(watchedCount + 1);
  }

  function handlePlusThree() {
    setWatchedCount((count) => count + 1);
    setWatchedCount((count) => count + 1);
    setWatchedCount((count) => count + 1);
  }

  return (
    <div className="page">
      <div className="toolbar">
        <p className="count">
          Shows watched: {watchedCount}
        </p>
        <button onClick={handlePlusOne} className="card-button">+1</button>
        <button onClick={handlePlusThree} className="card-button">+3</button>
      </div>
      <div className="cards">
        <ShowCard
          title="The Bear"
          year={2022}
          genre="Drama"
          rating={8.6}
          still="still-warm"
        />
        <ShowCard
          title="Severance"
          year={2022}
          genre="Thriller"
          rating={8.7}
          still="still-cold"
        />
        <ShowCard
          title="Andor"
          year={2022}
          genre="Sci-Fi"
          rating={8.4}
          still="still-dusty"
        />
      </div>
    </div>
  );
}