What is the useId hook in React 18?
Why Interviewers Ask This
Candidates at the intermediate level are expected to not only know this concept but explain the trade-offs involved. Interviewers use this question to see if you can reason about design decisions, not just recall facts.
Answer
useId (React 18) generates a unique, stable ID that is consistent between the server and client, solving hydration mismatches when IDs are used for accessibility attributes. Problem it solves: using Math.random() or a counter to generate IDs causes SSR hydration errors because the server and client generate different values. const id = useId(); generates something like :r0: — unique within the component, consistent between server and client, and stable across renders. Common use: linking labels and inputs for accessibility: const id = useId(); <label htmlFor={id}>Name:</label><input id={id} />. For a list, call useId once and derive multiple IDs: const id = useId(); const nameId = `\${id}-name`; const emailId = `\${id}-email`;. Do not use useId for keys in lists — keys identify items in a list by data, not by component instance. useId is specifically for HTML attribute connections (id, aria-labelledby, aria-describedby, htmlFor). Multiple calls to useId in the same component return different IDs.
Pro Tip
Back up your answer with a specific project or situation. Saying 'In my last React.js project, I used this when...' immediately makes your answer more credible and memorable.