Hook: useId

Introducción
useId es un hook de React introducido en la versión 18, diseñado para generar identificadores únicos que son estables y predecibles. Este hook es útil para situaciones en las que necesitas un identificador único pero no quieres generarlo manualmente. Es especialmente útil para elementos que requieren accesibilidad, como inputs con etiquetas asociadas (label).

1. Qué es useId? #

• Propósito: Crear identificadores únicos que no colisionan incluso en aplicaciones con renderizado en servidor (SSR).
• Estabilidad: Genera el mismo identificador en cada render, lo que lo hace ideal para identificar elementos de manera consistente.

2. Sintaxis #

1const id = useId();

• id: Contiene una cadena única que puedes usar como identificador en elementos del DOM.

3. Ejemplo Básico: Input con useId #

Código #

1import React, { useId } from "react";
2
3function FormularioConUseId() {
4  const id = useId();
5
6  return (
7    <form>
8      <label htmlFor={id}>Nombre:</label>
9      <input id={id} type="text" placeholder="Escribe tu nombre" />
10    </form>
11  );
12}
13
14export default FormularioConUseId;

Explicación #

1. useId: Genera un identificador único para el input.
2. htmlFor y id: Asocian el label con el input, mejorando la accesibilidad.

4. Caso Práctico: Múltiples Inputs #

Cuando tienes varios campos en un formulario, puedes usar useId para generar identificadores únicos para cada uno.

Código #

1import React, { useId } from "react";
2
3function FormularioMultiple() {
4  const idNombre = useId();
5  const idCorreo = useId();
6
7  return (
8    <form>
9      <div>
10        <label htmlFor={idNombre}>Nombre:</label>
11        <input id={idNombre} type="text" placeholder="Escribe tu nombre" />
12      </div>
13      <div>
14        <label htmlFor={idCorreo}>Correo:</label>
15        <input id={idCorreo} type="email" placeholder="Escribe tu correo" />
16      </div>
17    </form>
18  );
19}
20
21export default FormularioMultiple;

Explicación #

1. Un ID por Campo: Usamos useId para generar identificadores únicos para cada input.
2. Asociación Consistente: Cada label está correctamente asociado a su input correspondiente.

5. Uso Avanzado: Combinar useId con Props Dinámicas #

Cuando trabajas con componentes reutilizables, puedes usar useId para generar identificadores únicos que dependan de las props.

Código #

1import React, { useId } from "react";
2
3function Campo({ etiqueta, tipo = "text", placeholder }) {
4  const id = useId();
5
6  return (
7    <div>
8      <label htmlFor={id}>{etiqueta}:</label>
9      <input id={id} type={tipo} placeholder={placeholder} />
10    </div>
11  );
12}
13
14function Formulario() {
15  return (
16    <form>
17      <Campo etiqueta="Nombre" placeholder="Escribe tu nombre" />
18      <Campo etiqueta="Correo" tipo="email" placeholder="Escribe tu correo" />
19    </form>
20  );
21}
22
23export default Formulario;

Explicación #

1. Componente Reutilizable: El componente Campo genera automáticamente un identificador único para cada instancia.
2. Props Dinámicas: Los campos pueden tener diferentes etiquetas y tipos, pero cada uno tiene un ID único.

6. Usos Comunes de useId #

1. Accesibilidad:

   • Crear relaciones entre etiquetas (label) e inputs.
   • Identificar elementos interactivos para lectores de pantalla.

2. Componentes Reutilizables:

   • Evitar conflictos de identificadores en instancias múltiples.

3. SSR y CSR Consistente:

   • Generar IDs estables tanto en el servidor (SSR) como en el cliente (CSR).

7. Limitaciones de useId #

1. No en Componentes Clases:

   • useId es exclusivo para componentes funcionales.

2. No Cambia Dinámicamente:

   • Los IDs generados por useId no cambian entre renderizaciones. Si necesitas un ID dinámico, debes generarlo manualmente.

3. Único por Componente:

   • Cada llamada a useId dentro de un componente genera un ID único, pero no es global en toda la aplicación.

8. Alternativa: Generar IDs Manualmente #

Si necesitas IDs dinámicos o que se compartan en diferentes partes de la aplicación, puedes usar bibliotecas como uuid o nanoid.

Ejemplo: Usando uuid #

1npm install uuid

1import React from "react";
2import { v4 as uuidv4 } from "uuid";
3
4function FormularioConUUID() {
5  const idNombre = uuidv4();
6  const idCorreo = uuidv4();
7
8  return (
9    <form>
10      <div>
11        <label htmlFor={idNombre}>Nombre:</label>
12        <input id={idNombre} type="text" placeholder="Escribe tu nombre" />
13      </div>
14      <div>
15        <label htmlFor={idCorreo}>Correo:</label>
16        <input id={idCorreo} type="email" placeholder="Escribe tu correo" />
17      </div>
18    </form>
19  );
20}
21
22export default FormularioConUUID;

9. Cuándo Usar useId? #

1. Inputs con Accesibilidad:

   • Formularios o elementos interactivos que necesitan etiquetas asociadas.

2. Componentes Reutilizables:

   • Donde cada instancia requiere un ID único.

3. Compatibilidad con SSR:

   • Si tu aplicación usa renderizado en servidor (Next.js, por ejemplo), useId asegura IDs consistentes.