cf.completefrontend

Predict the outputMedium

This component reads a ref while it renders. What does the page show after one click?

What does it log, and what does the page show?
import { useRef, useState } from "react";
 
export default function App() {
  const [cups, setCups] = useState(0);
  const headingRef = useRef(null);
 
  const label = headingRef.current ? headingRef.current.textContent : "nothing yet";
 
  return (
    <>
      <h2 ref={headingRef}>Cups: {cups}</h2>
      <p>The ref holds: {label}</p>
      <button onClick={() => setCups(cups + 1)}>Add a cup</button>
    </>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click Add a cup once.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…