hand sketched logo of electrons orbiting a nucleus

TIL: React.UseId for Aria Id's

import React from 'react';

const MyInput = () => {
  const unqiueIdPerInstance = React.useId();

  return (
    <div>
      <label htmlFor={unqiueIdPerInstance}>Label</label>
      <input id={unqiueIdPerInstance} />
    </div>
  );
};

What is it?

React.useId is a hook that returns a unique Id for the lifetime of the component. This is useful for generating unique Ids for aria attributes for components used multiple times on a page.