🔑 O que é useId no React?

O useId é um Hook do React (disponível a partir da versão 18) que é usado para gerar identificadores únicos e estáveis dentro de um componente. Ele retorna uma string que é garantida ser exclusiva para aquela instância específica do componente.

🎯 Para que Serve o useId?
O principal objetivo do useId é ajudar na acessibilidade (Accessibility), especialmente para conectar elementos DOM que precisam de um ID único para funcionar corretamente.

1. Conexão de Elementos (Acessibilidade) É o uso mais comum. No HTML, para associar uma label (rótulo) a um campo de formulário (input), você precisa que o atributo htmlFor da label seja igual ao atributo id do input. Problema: Se você simplesmente codificar o ID, por exemplo, , e esse componente for renderizado várias vezes na mesma página (como em uma lista ou dentro de outros componentes), você terá IDs duplicados, o que é inválido no HTML e prejudica leitores de tela e a acessibilidade. Solução com useId: O useId gera um ID diferente para cada instância do seu componente, garantindo que a associação entre label e input funcione corretamente em qualquer cenário. JavaScript

import { useId } from 'react';

function PasswordField() {
 // Gera um ID único e estável para esta instância
 const passwordId = useId(); 

 return (
   <>
     <label htmlFor={passwordId}>Senha:</label>
     <input id={passwordId} type="password" />
   </>
 );
}

1. Compatibilidade com Server-Side Rendering (SSR)
   Este é um grande benefício. O useId garante que o ID gerado seja o mesmo tanto na primeira renderização no servidor quanto na renderização subsequente no cliente (o processo chamado de hidratação).
   Isso evita problemas de incompatibilidade (mismatches) que podem ocorrer quando IDs são gerados aleatoriamente ou de forma não determinística, garantindo que o seu HTML seja consistente.

2. Outros Atributos ARIA
   Ele também é útil para outros atributos de acessibilidade do ARIA (Accessible Rich Internet Applications), como:
   aria-labelledby
   aria-describedby

❌ Quando Não Usar useId?
É importante notar que o useId não deve ser usado para:
Gerar keys para listas: As chaves (keys) em listas (quando se usa .map()) devem ser baseadas nos dados subjacentes (por exemplo, um ID do banco de dados). O useId não garante chaves estáveis no caso de reordenação de listas, o que poderia levar a bugs de estado.
Gerar IDs globalmente únicos (UUIDs): Embora seja único dentro da árvore React, o formato do ID é determinístico para garantir a consistência Server/Client, e não se destina a ser um identificador globalmente aleatório, como um UUID