Le crochet useId de React

Le hook useId de React offre une solution accessible pour gérer les identifiants uniques dans les composants cohérents entre le serveur et le client.

Dans Réagir version 18React a introduit un nouveau hook intitulé ID d’utilisation qui fournit une solution très utile pour gérer les identifiants uniques au sein des composants. Dans cet article, nous passerons du temps à explorer ses fonctionnalités, ses cas d’utilisation et ses avantages dans la création d’applications React plus accessibles et plus maintenables.

utiliser le crochet d’identification

En un mot, le useId hook génère un identifiant unique et stable pour les composants. Cet ID reste cohérent entre les rendus du serveur et du client, garantissant que le HTML généré côté serveur correspond au HTML généré côté client. Ceci est particulièrement utile pour les problèmes d’accessibilité tels que l’association des entrées de formulaire à des étiquettes ou dans tout scénario où des identifiants uniques sont nécessaires dans un composant.

Passons en revue un exemple pour illustrer l’utilisation de useId crochet dans React. Nous commencerons par un composant simple, par exemple un composant de formulaire avec un champ de saisie et une étiquette.

import React from "react";

export function Form() {
  return (
    <div>
      <label htmlFor="nameInput">Name:</label>
      <input id="nameInput" type="text" />
    </div>
  );
}

Dans l’exemple de code ci-dessus, nous codons en dur le id pour l’entrée et le correspondant htmlFor attribut pour l’étiquette. Cela fonctionne bien pour une seule instance de FormComponentmais si nous devions utiliser plusieurs instances de ce composant sur la même page, nous rencontrerions des problèmes d’ID en double, ce qui n’est pas idéal pour l’accessibilité et peut entraîner des problèmes de validation HTML.

Si nous devions utiliser plusieurs instances de ce qui précède Form composant sur la même page, nous voudrions générer dynamiquement un identifiant unique pour chaque instance du champ de saisie et son étiquette associée. Ceci est crucial lorsque nous avons plusieurs instances du composant, car chaque paire entrée-étiquette a besoin d’un identifiant unique.

Pour atteindre cet objectif, nous allons refactoriser le Form composant pour utiliser le useId hook pour générer un identifiant unique :

import React, { useId } from "react";

export function Form() {
  
  const inputId = useId();

  return (
    <div>
      <label htmlFor={inputId}>Name:</label>
      <input id={inputId} type="text" />
    </div>
  );
}

Dans cette version révisée, le useId hook génère un identifiant unique, stocké dans une variable nommée inputIdque nous utilisons ensuite pour le id attribut de l’entrée et le htmlFor attribut de l’étiquette.

Avec ces récents changements, supposons que nous ayons un parent App composant qui restitue plusieurs Form Composants.

import React from "react";
import { Form } from "./Form";

function App() {
  return (
    <div>
      <Form />
      <Form />
      <Form />
    </div>
  );
}

Lorsque React restitue ces composants, chacun Form appels d’instance useId, qui génère un identifiant unique. La première instance peut générer un identifiant comme "input-0"la deuxième "input-1" et le troisième "input-2". Les valeurs réelles dépendent du mécanisme interne de React et peuvent varier. Par exemple, lors du test de l’exemple ci-dessus, nous remarquons des identifiants uniques tels que les suivants :

Voir l’exemple de code en cours d’exécution ci-dessus dans ce Lien CodeSandbox.

À tout moment, si nous devons ajouter des préfixes personnalisés dans le composant pour distinguer davantage les identifiants générés par le useId hook, nous pouvons créer une simple fonction wrapper autour useId. Cette approche peut être utile dans les applications volumineuses où différents modules ou composants peuvent nécessiter une gestion des ID plus spécifique pour éviter des conflits potentiels, même avec les ID uniques générés par useId.

Voici un exemple de la façon dont nous pourrions implémenter un préfixe personnalisé dans le composant en créant un préfixe personnalisé usePrefixedId crochet:

import React, { useId } from "react";


function usePrefixedId(prefix) {
  const id = useId();
  return `${prefix}-${id}`;
}

export function Form({ prefix }) {
  
  const inputId = usePrefixedId(prefix);

  return (
    <div>
      <label htmlFor={inputId}>Name:</label>
      <input id={inputId} type="text" />
    </div>
  );
}

Dans l’exemple ci-dessus, la coutume usePrefixedId le crochet prend un prefix et l’ajoute à l’ID généré par useId. Lors de l’utilisation du Form composant, nous pouvons éventuellement passer un prefix prop pour personnaliser l’ID. Sinon prefix est fourni, il est par défaut 'form'.

Chez le parent App instance de composant que nous avions précédemment, nous pouvons spécifier différents préfixes pour chaque composant comme suit :

import React from "react";
import { Form } from "./Form";

function App() {
  return (
    <div>
      <Form prefix="user" />
      <Form prefix="profile" />
      <Form prefix="contact" />
    </div>
  );
}

Les identifiants de chacun Form Le composant sera non seulement unique d’une instance à l’autre, mais également clairement associé à un contexte spécifique ou à une partie de l’application (par exemple, "user-input-0", "profile-input-1" et "contact-input-2"). Les valeurs réelles dépendent toujours du mécanisme de génération d’identifiant interne de React, mais incluront désormais les préfixes spécifiés, ajoutant une couche supplémentaire de clarté et de distinction.

Voir l’exemple de code en cours d’exécution ci-dessus dans ce Lien CodeSandbox.

Enfin, le Réagir à la documentation nous indique que nous pouvons également personnaliser le préfixe de tous les identifiants générés par le useId crochet en utilisant le identifierPrefix possibilité dans le créerRacine appel qui sert à initialiser l’application React :

import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root", {
  
  identifierPrefix: "fresh-app-",
});

const root = createRoot(rootElement);
root.render(<App />);

La spécification d’un préfixe global comme celui ci-dessus est souvent utile lors du rendu de plusieurs applications React sur une seule page. Cela permet d’éviter les conflits d’ID entre les composants de différentes applications. Chaque application peut avoir son propre préfixe unique, de sorte que les identifiants générés par useId sont uniques non seulement dans chaque application mais dans toutes les applications de la page.

Conclure

En résumé, React useId hook offre une solution accessible pour gérer les identifiants uniques dans les composants. La génération dynamique d’ID stables et cohérents permet de maintenir la cohérence des identifiants entre les rendus du serveur et du client. Cette cohérence est cruciale pour les applications qui s’appuient sur le rendu côté serveur, car elle garantit que le HTML rendu par le serveur correspond à celui rendu par le client.

Pour plus de détails sur le useId crochet, assurez-vous de lire attentivement le documentation officielle de React.