Skip to main content

useId

Este é pra mim um dos, se não o mais simples hook do React. O uso dele simplesmente retorna um ID único que pode ser utilizado como atributo de acessibilidade.

Forma de uso:

import { useId } from 'react';

function GeneratorPage() {
  const uniqueId = useId();

O userId não recebe parâmetros, apenas inicializa retornando o ID único.

useId é um hook super útil do React que gera identificadores únicos para elementos. Ele é especialmente importante para casos em que você precisa associar elementos acessíveis, como rótulos (label) a campos de formulário, sem se preocupar com colisões de IDs.

Isso é muito prático quando você está criando componentes reutilizáveis ou renderizando listas dinâmicas!

Vamos entender melhor como ele funciona.

Quando usar useId?​

Imagine que você esteja criando um formulário com vários campos. Normalmente, associar um <label> a um <input> requer um id. Com useId, você garante que cada campo tenha um ID único, sem precisar se preocupar em gerá-los manualmente ou correr o risco de repetir valores.

Exemplo prático — Formulário de Cadastro 📝​

useId
import React, { useId } from 'react';

function RegistrationForm() {
  const nameId = useId();
  const emailId = useId();
  const passwordId = useId();

  return (
    <form>
      <div>
        <label htmlFor={nameId}>Nome:</label>
        <input id={nameId} type="text" placeholder="Digite seu nome" />
      </div>

      <div>
        <label htmlFor={emailId}>Email:</label>
        <input id={emailId} type="email" placeholder="Digite seu email" />
      </div>

      <div>
        <label htmlFor={passwordId}>Senha:</label>
        <input id={passwordId} type="password" placeholder="Digite sua senha" />
      </div>

      <button type="submit">Cadastrar</button>
    </form>
  );
}

🧠 O que acontece aqui?

Cada campo de entrada recebe um ID único gerado pelo useId, o que garante que não haverá conflitos, mesmo se você renderizar múltiplos formulários no mesmo componente. Além disso, ao usar o ID gerado no atributo htmlFor do elemento <label>, você melhora a acessibilidade, garantindo que o campo associado seja corretamente identificado por leitores de tela. Isso facilita a navegação e torna o formulário mais inclusivo. Como resultado, mesmo com várias renderizações, os IDs sempre serão distintos, eliminando o risco de colisões. Por exemplo, um campo renderizado poderia ter a seguinte estrutura:

<label for=":r0:">Nome:</label>
<input id=":r0:" type="text" placeholder="Digite seu nome" />

Os IDs podem ter formatos como :r0:, :r1:, etc. O React garante que eles sejam únicos.

Por que não usar Math.random ou UUID?​

Você até poderia usar algo como Math.random ou bibliotecas como uuid, mas o useId tem algumas vantagens:

  • Estabilidade entre renderizações: O ID permanece o mesmo durante o ciclo de vida do componente, o que evita problemas com re-renderizações desnecessárias.
  • SSR (Server-Side Rendering): IDs gerados pelo useId são consistentes no servidor e no cliente, evitando incompatibilidades de hidratação.

Limitações do useId​

  • Não é para chaves de listas: Se você precisa de chaves para componentes renderizados em listas, o ideal é usar algo estável (ex: um ID vindo da API).
  • IDs fixos: Uma vez gerado, o ID não muda, mesmo que o componente atualize ou tenha seu estado alterado.

Conclusão​

O useId é um hook simples, mas poderoso, que resolve de forma elegante o problema de gerar identificadores únicos no React. Ele facilita a criação de formulários acessíveis e evita colisões de ID, sem que você precise se preocupar com bibliotecas externas ou lógicas complicadas.

Se você está construindo componentes reutilizáveis ou trabalhando com formulários dinâmicos, vale muito a pena adicionar o useId à sua caixinha de ferramentas React! 🛠️

tip

Conheça mais sobre os hooks em:

Referências:​