useId

Generates unique IDs that are stable across server and client renders. It avoids hydration mismatches in SSR applications and is primarily used for linking accessibility attributes (aria-describedby, htmlFor, etc.) to HTML elements.

import { useId } from 'react';

// The generated ID is always deterministic and safe
export const MyComponent = () => {
    const id = useId();

    return (
        <>
            <label htmlFor={id}>Name</label>
            <input id={id} />
        </>
    );
};