Section courante

A propos

Section administrative du site

useId

 Utilise un identificateur
React

Syntaxe

const id = useId()

Description

useId est un crochet React permettant de générer des identifiants uniques pouvant être transmis aux attributs d'accessibilité.

Référence

useId()

Appelez useId au niveau supérieur de votre composante pour générer un ID unique :

  1. import { useId } from 'react';
  2.  
  3. function PasswordField() {
  4.   const passwordHintId = useId();
  5.   // ...

Paramètres

useId ne prend aucun paramètre.

Renvois

useId renvoie une chaîne d'identifiant unique associée à cet appel useId dans cette composante.

Avertissements

useId est un crochet ; vous ne pouvez donc l'appeler qu'au niveau supérieur de votre composant ou de vos propres crochets. Vous ne pouvez pas l'appeler dans des boucles ou des conditions. Si nécessaire, extrayez un nouveau composant et déplacez-y l'état.

useId ne doit pas être utilisé pour générer des clefs dans une liste. Les clefs doivent être générées à partir de vos données.

useId ne peut actuellement pas être utilisé dans les composants serveur désynchronisées.

Utilisation

Piège

N'appelez pas useId pour générer des clefs dans une liste. Les clefs doivent être générées à partir de vos données.

Génération d'identifiants uniques pour les attributs d'accessibilité.

Appelez useId au niveau supérieur de votre composant pour générer un identifiant unique :

  1. import { useId } from 'react';
  2.  
  3. function PasswordField() {
  4.   const passwordHintId = useId();
  5.   // ...

Vous pouvez ensuite transmettre l'ID généré à différents attributs :

  1. <>
  2.   <input type="password" aria-describedby={passwordHintId} />
  3.   <p id={passwordHintId}>
  4. </>

Prenons un exemple pour comprendre son utilité.

Les attributs d'accessibilité HTML comme aria-describedby permettent de spécifier que deux balises sont liées. Par exemple, vous pouvez spécifier qu'un élément (comme une entrée) est décrit par un autre élément (comme un paragraphe).

En HTML standard, cela se présente ainsi :

  1. <label>
  2.   Password:
  3.   <input
  4.     type="password"
  5.     aria-describedby="password-hint"
  6.   />
  7. </label>
  8. <p id="password-hint">
  9.   Le mot de passe doit contenir au moins 18 caractères
  10. </p>

Cependant, coder en dur des identifiants comme celui-ci n'est pas une bonne pratique en React. Une composante peut être affiché plusieurs fois sur la page, mais les identifiants doivent être uniques ! Au lieu de coder en dur un identifiant, générez-en un unique avec useId :

  1. import { useId } from 'react';
  2.  
  3. function PasswordField() {
  4.   const passwordHintId = useId();
  5.   return (
  6.     <>
  7.       <label>
  8.         Password:
  9.         <input
  10.           type="password"
  11.           aria-describedby={passwordHintId}
  12.         />
  13.       </label>
  14.       <p id={passwordHintId}>
  15.         Le mot de passe doit contenir au moins 18 caractères
  16.       </p>
  17.     </>
  18.   );
  19. }

Désormais, même si PasswordField apparaît plusieurs fois à l'écran, les identifiants générés n'entreront pas en conflit.



Dernière mise à jour : Mercredi, le 10 septembre 2025