Introducción al Hook useId() en React 18

El gancho useId() es una nueva forma de generar una identificación aleatoria única en React 18.

El useId es un nuevo gancho introducido en React 18. El gancho useId ayuda a generar una identificación única tanto en el lado del cliente como en el lado del servidor.

El anterior se llamaba useOpaqueIdentifier hook en React. El useOpaqueIdentifier el hook tenía muchos errores y limitaciones, por lo que useId se retrasó.

En React 18, todos los problemas se resolvieron correctamente y el equipo de React introdujo el useOpaqueIdentifier el hook con el nuevo nombre useId.

OBTENER CURSO REACT JS DESDE CERO

import React from "react";

export default function App() {
  const fullName = React.unstable_useOpaqueIdentifier();
  const email = React.unstable_useOpaqueIdentifier();
  const term = React.unstable_useOpaqueIdentifier();

  return (
    <div className="card">
      <div>
        <label htmlFor={fullName}>Full Name</label>
        <input type="text" id={fullName} name="Full Name" />{" "}
      </div>
      <div>
        <label htmlFor={email}>Enter Email</label>
        <input type="email" id={email} name="email" />
      </div>
      <div>
        <input type="checkbox" id={term} name="term" />
        <label htmlFor={term}>Agree with term</label>
      </div>
      <input type="submit" value="Submit" />
    </div>
  );
}

Más información: https://github.com/facebook/react/pull/17322#issuecomment-613104823

 

El equipo de React aún no ha proporcionado documentación para React 18 porque todavía está en su versión beta.

 

Las conclusiones del hook useId.

1. useId es un hook
2. useId devuelve una cadena
3. useId devuelve una identificación única para el lado del cliente y del servidor.
4. useId se ha introducido como una función completa en React 18.

¿Cuál es el requisito para usar el hook useId?

Como sabemos, el gancho useId genera una identificación única para la aplicación. Unimos dos elementos HTML con ID de ayuda en HTML la mayor parte del tiempo. Pero ahora, podemos usar el hook useId para unir dos elementos en React.

Por ejemplo, podemos unir la etiqueta y la etiqueta de entrada con id y for. Cada identificación debe ser única en la página HTML.

<label for="fullName" >Nombre completo</label><br> 
<input type="text" id="fullName" name="Full Name"> <br><br> 

<label for="email" > Ingrese el correo electrónico</label><br> 
<input type="email" id="email" name="email"> <br><br>

 

¿Dónde y por qué utilizamos el hook useId?

Utilizamos el gancho useId solo para unir dos elementos HTML. Si cree que puede utilizarlo para la generación de ID, es perfecto, pero asegúrese de no apuntar a la ID en CSS porque su ID único genera ID diferentes cada vez para usted.

Más información: https://github.com/reactwg/react-18/discussions/111

 

OBTENER CURSO REACT JS DESDE CERO

 

Ejemplo 1

import { useId } from "react";

export default function App() {
  const fullName = useId();
  const email = useId();
  const term = useId();

  return (
    <div className="card">
      <div>
        <label htmlFor={fullName}>Full Name</label>
        <input type="text" id={fullName} name="Full Name" />{" "}
      </div>
      <div>
        <label htmlFor={email}>Enter Email</label>
        <input type="email" id={email} name="email" />
      </div>
      <div>
        <input type="checkbox" id={term} name="term" />
        <label htmlFor={term}>Agree with term</label>
      </div>
      <input type="submit" value="Submit" />
    </div>
  );
}

 

Ejemplo 2

import { useId } from "react";

export default function Example2() {
  let prefix1 = useId();
  let prefix2 = useId();
  let prefix3 = useId();

  return (
    <div className="card">
      <div>
        <label htmlFor={prefix1 + "-fullName"}>Full Name</label>
        <input type="text" id={prefix1 + "-fullName"} name="Full Name" />
      </div>
      <div>
        <label htmlFor={prefix2 + "-email"}>Enter Email</label>
        <input type="email" id={prefix2 + "-email"} name="email" />
      </div>
      <div>
        <input type="checkbox" id={prefix3 + "-term"} name="term" />
        <label htmlFor={prefix3 + "-term"}>Agree with term</label>
      </div>
      <input type="submit" value="Submit" />
    </div>
  );
}

 

Ejemplo 3

import { version, useId } from "react";

export default function App() {
  let items = [
    {
      id: 1,
      title:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ",
    },
    {
      id: 2,
      title:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ",
    },
    {
      id: 3,
      title:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ",
    },
    {
      id: 4,
      title:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ",
    },
  ];

  let prefix1 = useId();

  return (
    <div className="card">
      <p> Reactjs version : {version} </p>
      {items.map((item) => {
        return (
          <p id={prefix1 + `${item.id}`} key={item.id}>
            {item.id}: {item.title}
          </p>
        );
      })}
    </div>
  );
}

 

Ejemplo 4

import { version, useId } from "react";

export default function App() {
  const ID = useId();
  const type = typeof ID;
  console.log(ID);

  return (
    <div className="card">
      <p> Reactjs version : {version} </p>
      <h1>
        {" "}
        Id: {ID} and type of Id is: {type}{" "}
      </h1>
    </div>
  );
}

 

Ejemplo 5

Pasar el argumento de número se utiliza gancho. No está funcionando de acuerdo con mis experimentos.

import { version, useId } from "react";

export default function App() {
  const ID = useId(5);
  const type = typeof ID;

  return (
    <div className="card">
      <p> Reactjs version : {version} </p>
      <h1>
        {" "}
        Id: {ID} and type of Id is: {type}
      </h1>
    </div>
  );
}

 

OBTENER CURSO REACT JS DESDE CERO