🔑 O que é useId no React?

Source: Dev.to

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

Para que serve o useId?

Conexão de elementos (acessibilidade)

O uso mais comum é associar uma <label> a um campo de formulário (<input>). Em HTML, o atributo htmlFor da label deve ser igual ao atributo id do input. Se o ID for codificado manualmente e o componente for renderizado várias vezes, ocorrerão IDs duplicados, o que invalida o HTML e prejudica leitores de tela.

Com useId, cada instância do componente recebe um ID diferente, garantindo a associação correta entre label e input.

import { useId } from 'react';

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

  return (
    <>
      Senha:
      {/* exemplo de uso do ID */}
      <label htmlFor={passwordId}>Senha</label>
      <input id={passwordId} type="password" />
    </>
  );
}

Compatibilidade com Server‑Side Rendering (SSR)

useId garante que o ID gerado seja o mesmo na primeira renderização no servidor e na renderização subsequente no cliente (hidratação). Isso evita mismatches que podem surgir quando IDs são gerados aleatoriamente ou de forma não determinística, mantendo o HTML consistente entre servidor e cliente.

Outros atributos ARIA

O hook também pode ser usado para atributos de acessibilidade do ARIA, como:

• aria-labelledby
• aria-describedby

Quando não usar useId?

• Gerar keys para listas: As chaves (key) em listas (.map()) devem ser baseadas em dados estáveis (por exemplo, um ID do banco de dados). useId não garante estabilidade em reordenações de lista, podendo causar bugs de estado.
• Gerar IDs globalmente únicos (UUIDs): Embora único dentro da árvore React, o formato do ID é determinístico para garantir consistência entre servidor e cliente e não deve ser usado como um identificador global aleatório, como um UUID.