A React hook that generates a deterministic unique ID once per component.

npm i @utilityjs/use-deterministic-id | yarn add @utilityjs/use-deterministic-id

This hook in React versions less than 18 relies on hydration to avoid server/client mismatch errors.
If you'd like to generate ids server-side, we suggest upgrading to React 18.

Usage

const App = (props) => {
  const id = useDeterministicId();
  // or useDeterministicId(props.id)

  return (
    <div className="app">
      <label htmlFor={id}>Label</label>
      <input type="text" name="text-input" id={id} />
    </div>
  );
};

API

useDeterministicId(idOverride?, prefix?)

declare const useDeterministicId: (idOverride?: string, prefix?: string) => string;

idOverride

Allows you to override the generated id with your own id.

prefix

Allows you to prefix the generated id.