useId

React 🟢 Junior

Definition

Hook qui genere un identifiant unique stable entre serveur et client, utile pour les attributs d'accessibilite comme htmlFor et aria-describedby.

Analogie

Comme un tampon officiel : le meme numero est attribue que tu sois au guichet (serveur) ou en ligne (client).

Exemple de code

function Input({ label }) {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

Cas d'usage

Generer des IDs pour les associations label/input sans risque de collision en SSR.

Anti-pattern

Utiliser useId pour generer des keys de liste : il n'est pas prevu pour ca.

Termes lies

#hooks#a11y#react18