cf.completefrontend

Predict the outputMedium

What do these fields show after a re-render, with ids from useId and from a counter?

Each Field gets one id from useId and another from a counter outside the component. In React 19.3, useId returns strings like _r_0_.

What does it log, and what does the page show?
import { useId, useState } from "react";
 
let nextId = 0;
 
function Field({ label }) {
  const id = useId();
  const counterId = `field-${nextId++}`;
  return (
    <p>
      {label}: {id} and {counterId}
    </p>
  );
}
 
export default function App() {
  const [clicks, setClicks] = useState(0);
  return (
    <>
      <Field label="Name" />
      <Field label="Email" />
      <button onClick={() => setClicks(clicks + 1)}>Re-render ({clicks})</button>
    </>
  );
}

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

  1. You click Re-render 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…