useId

Example

Generates a unique id (stable on server and client) to connect labels and inputs, even when the component is used many times.

import { useId } from 'react';

function EmailField() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Email </label>
      <input id={id} type="email" />
    </div>
  );
}

export default function App() {
  return <><EmailField /><EmailField /></>;
}

Result