Add useId() hook

[yajihum]

What is the feature you are proposing?

Currently, Hono does not provide the useId hook among React Hooks, and we would like to add it.

Official Documentation on React's useId: https://react.dev/reference/react/useId

Implementation location of useId in React: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L3097-L3132

Example usage

This is primarily used for accessibility attributes. By using useId to provide a unique ID, rather than hardcoding the ID, we can ensure that the generated IDs do not overlap even when the same component is rendered multiple times.

For example:

import { useId } from 'react';

function PasswordField() {
  // In the first PasswordField, it outputs id=':r1:'
  // In the second PasswordField, it outputs id=':r2:'
  const passwordHintId = useId();

  return (
    <>
      <label>
        Password:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        The password should contain at least 18 characters
      </p>
    </>
  );
}

export default function App() {
  return (
    <>
      <h2>Choose password</h2>
      <PasswordField />
      <h2>Confirm password</h2>
      <PasswordField />
    </>
  );
}

Suggestion

If you are open to this issue, I would like to submit a PR. However, this would be my first major contribution to an open-source project, so there might be areas where I lack experience. I would appreciate your support in such cases!

[usualoma]

Hi @yajihum Thanks for the suggestion!

Patches are welcome, but "hono/jsx" would like to keep the implementation as small as possible and would like to get it done in #2389. Is this implementation likely to achieve the results you are looking for?

[usualoma]

Why is it so simple in "hono/jsx"?

React states that it is recommended to use useId() to ensure the same id when used with hydration. https://react.dev/reference/react/useId#why-is-useid-better-than-an-incrementing-counter

Since hono does not have a clever implementation like React's hydration, it is preferable to keep the implementation as simple as possible, since there is no motivation to generate the same id at this time.

[yajihum]

@usualoma Thank you for your quick response and implementation! It seems like I can use useId without any issues with the code you've implemented! I was able to understand the philosophy of Hono and it was a great learning experience. Thank you very much! 😊

[yusukebe]

Hi @yajihum

Thank you for creating the issue. I've approved #2389 , but this change includes a new feature. We are following a semver in almost case, so, this will be shipped in the next minor version 4.2. May be it will not be so far. Please wait a moment.

[yusukebe]

The 4.2 is released. We can close this issue. Thanks!