useId hook

How to use the useId hook to generate a unique ID for your components.

Description

Hard-coding IDs in components is very often a bad idea. The useId hook will solve this problem.

This hook will generate a unique string ID for your component in the following format: :w<number>:. The number in between will simply be a counter that will be incremented every time the hook is called for the first time in a component. This ensures that the ID will be unique, but the ID will probably NOT be the same every time you reload the application.

Usage

const id = useId();

The useId hook accepts no parameters and will return always the same value across re-renders.

Example: Accessibility

A common use case for the useId is to solve accessibility problems or simply setting a "for" attribute to a label element.

import { defineWompo, html, useId } from 'wompo';

export default function InputExample() {
  const hintId = useId(); // :w0:
  const inputId = useId(); // :w1:

  return html`
    <label for=${inputId}>Password:</label>
    <input id=${inputId} aria-describedby=${hintId} />
    <p id=${hintId}>The password should contain at least 8 characters</p>
  `;
}

defineWompo(InputExample);

Even if the InputExample is rendered multiple times, it'll always keep working without having IDs clashes.