📖
Hook 18

useId

Gera ID único e estável entre server e client. Previne hydration mismatch.

📚 O que é

ID determinístico baseado na posição do componente na árvore React. Mesmo ID no server e no client — essencial para SSR/RSC. Retorna string como ':r1:'.

✅ Quando usar

Conectar label com input (htmlFor + id). Atributos ARIA (aria-labelledby, aria-describedby). Qualquer ID que precisa ser estável entre SSR e cliente.

🚫 Quando NÃO usar

Keys de listas (use ID do dado). IDs globalmente únicos para banco de dados (use UUID). IDs que precisam ser legíveis por humanos.

👍 Prós
Sem hydration mismatch
Estável entre renders
Seguro com Concurrent Mode
Pode gerar múltiplos relacionados
👎 Contras
Formato interno (:r1:) não bonito
Não serve para keys de lista
Só React 18+
🔗 Termos relacionados