useId

Generates a unique, stable ID for a component. This hook ensures that each rendered instance of a component gets its own unique identifier (derived from its position in the tree), making it ideal for cases where you need to bind elements like form labels, inputs, or any other HTML element requiring a unique id.

The generated id will remain consistent as long as the component's position in the application tree remains the same, ensuring that re-renders don't break associations between elements, such as form fields and labels.

Example

import { useId } from "kaioken"

function App() {
  return (
    <form>
      <FormItem name="First Name" />
      <FormItem name="Last Name" />
    </form>
  )
}

function FormItem({ name }) {
  const id = useId()

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