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 📝
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! 🛠️