useId
Gera IDs únicos e estáveis entre SSR e client — evita hydration mismatch em IDs.
Definição
useId é um hook do React 18 que retorna um ID único e estável para o componente. O ID é o mesmo no server e no client, evitando hydration mismatch. Usado para conectar inputs com labels, ARIA attributes, e outros casos onde IDs são necessários.
Problema → Solução
Problema
Math.random() ou Date.now() geram IDs diferentes entre server e client → hydration mismatch. Counter manual quebra com Concurrent Mode.Solução
useId gera IDs determinísticos baseados na posição na árvore React. Mesmo ID em server e client. Imune a Concurrent Mode.Dica de entrevista
Tip
NÃO use useId para keys de listas — use IDs do dado real. useId é para conectar elementos relacionados (label-input, ARIA).Código
function FormField({ label, ...props }) {
const id = useId();
return (
<div>
<label htmlFor={id}>{label}</label>
<input id={id} {...props} />
</div>
);
}
// Múltiplos relacionados
function PasswordField() {
const id = useId();
return (
<>
<input id={id + '-password'} type="password" />
<span id={id + '-help'}>Min 8 chars</span>
</>
);
}Perguntas de entrevista
Q.useId vs UUID?▾
A.useId: ID determinístico baseado na árvore React, igual server/client, ideal para a11y. UUID: aleatório, único globalmente, ideal para keys de banco/dados, mas causa mismatch em SSR.
Q.Posso concatenar useId?▾
A.Sim. Padrão comum: const id = useId(); depois id+'-name', id+'-email' para múltiplos campos relacionados ao mesmo formulário.
Q.useId funciona com SSR no Next.js?▾
A.Sim, perfeitamente. Foi feito para isso. App Router gera IDs estáveis entre Server Component render e client hydration.
Termos relacionados
31/122← →