Render and commit

Watch React re-run the card, compare the result, and apply only the difference.

Three steps

A click triggers a render. React re-runs your function, then commits the difference to the page.

Press the button and watch the three steps.

Only the year text flashes. That is the commit.

A watched badge is the difference

The same three steps run on a show card. First paint has no pill. After the click, the title and year stay; only the badge is new.

import "./styles.css";
import ShowCard from "./ShowCard";

export default function App() {
  return (
    <div className="page">
      <ShowCard
        title="The Bear"
        year={2022}
        genre="Drama"
        rating={8.6}
        still="still-warm"
      />
    </div>
  );
}

Press Watched. React compared the two descriptions and changed the pill, not the whole card.

The function runs again from the top

A log at the top of the card is the render phase. First paint prints false. After the click, a new call prints true.

import "./styles.css";
import ShowCard from "./ShowCard";

export default function App() {
  return (
    <div className="page">
      <ShowCard
        title="The Bear"
        year={2022}
        genre="Drama"
        rating={8.6}
        still="still-warm"
      />
    </div>
  );
}

The first line is rendering false. Press Watched and a new render logs rendering true. In development React draws each component twice, so each value may appear twice.

Common mistakes

• Thinking the first call is updated in place. React calls your function again from the top with the new state.
• Expecting the whole card to be rebuilt. Commit writes only what changed — here, the pill.
• Logging from the handler and calling that the render. The render log sits in the function body, not inside onClick.

Exercise

Pressing Watched logs a line, but the pill never appears. The handler never asks React to render again.

Fix it so one click puts a Watched pill on the still.

Hint: call setWatched(true) so React re-runs the card and commits the badge.

import "./styles.css";
import ShowCard from "./ShowCard";

export default function App() {
  return (
    <div className="page">
      <ShowCard
        title="The Bear"
        year={2022}
        genre="Drama"
        rating={8.6}
        still="still-warm"
      />
    </div>
  );
}