A React form component renders three labelled inputs that each need their own id. Do you call useId three times, and how do you derive the ids?

## The recommended shape ```jsx import { useId } from 'react'; function SignupForm() { const id = useId(); return ( <form> <label htmlFor={`${id}-name`}>Name</label> <input id={`${id}-name`} /> <label htmlFor={`${id}-email`}>Email</label> <input id={`${id}-email`} aria-describedby={`${id}-email-hint`} /> <p id={`${id}-email-hint`}>Work address preferred.</p> <label htmlFor={`${id}-password`}>Password</label> <input id={`${id}-password`} type="password" /> </form> ); } ``` One hook call, one namespace, as many ids as the component needs. React guarantees the prefix is unique per component instance and stable across server rendering and hydration, so every suffixed string inherits both properties. Render two `SignupForm`s on the same page and their fields cannot collide. ## Why not three calls Three calls are not *wrong*. Each returns its own unique, hydration-stable value and the form works. The reasons to prefer one call are practical: - **It scales past one id per field.** The email input above needs two related ids (itself and its hint). With one prefix that is free; with per-id calls you accumulate a call per attribute. - **The DOM is readable.** Every element in the form shares a visible prefix, which makes it obvious in devtools which fields belong together — useful when the same form appears twice on a page. - **Fewer hook calls to keep in order.** Hooks are matched by call order, so a smaller, flatter set is less to disturb when the component is edited. The React documentation itself presents the suffix pattern as the way to generate several related ids. ## The case where separate calls are not even available A dynamic field list makes multiple calls impossible: ```jsx function FieldList({ fields }) { const id = useId(); return fields.map((field) => ( <div key={field.name}> <label htmlFor={`${id}-${field.name}`}>{field.label}</label> <input id={`${id}-${field.name}`} name={field.name} /> </div> )); } ``` Calling `useId()` inside the `map` callback would mean a variable number of hook calls depending on `fields.length`, which violates the top-level call rule and breaks as soon as the array changes length. Suffixing with a value that is already unique per field — its `name`, or the same value you use as the `key` — gives every input a distinct, stable id from a single call. If a single field genuinely needs its own hook call, the honest fix is to extract it into its own component so the hook is called once per instance at the top level of that component. ## Constraints on the suffix - Pick something stable per field. A field's `name` or record key is good; the array index is bad for the same reason index keys are bad — reorder the fields and the ids shuffle underneath, so a label can end up pointing at a different input than it did before. - Keep the suffix a valid id fragment: no spaces, since a space would split the value where attributes like `aria-describedby` accept a space-separated list. - Do not parse the prefix or build selectors from it. React does not specify the format of the string it returns and has changed it across versions, so treat the whole value as opaque and use it only as an attribute value. If you need to reach an element in a test or in code, query it by its accessible role and name, or hold a ref. ## Interview framing Give the one-call-plus-suffix answer first, acknowledge that multiple calls are legal so it is a style preference in the simple case, then show the dynamic-list case where the suffix approach is the only one available. That progression — convention, reason, hard constraint — is what makes it a considered answer rather than a memorised idiom.