useId hook

Usually for accessibility reasons we need to generate IDs for DOM elements and reference those IDs via e.g. aria-labelledby attributes on other DOM elements.

Implementing a custom deterministic ID generator is not straightforward:

• If you use random ID generators then most probably IDs will mismatch during hydration, as the IDs generated during hydration will be different than the IDs which were generated on SSR.
• Using a global counter for ID generation might not be SSR-safe, as the counter needs to be unique for each render. Creating a context to store the counter might help tho.

React 18 introduces a useId hook which solves the problem of mismatching IDs on SSR/hydration, as the generated IDs are deterministic and based on the node location in the tree which will match on SSR and on hydration (if I get it right).

I think this would be really useful for most of the Preact users as well. What do you think?

[Wallacy]

Chara-ui now uses only React 18 and uses useId hook;

To update projects that use chakra-ui and preact that hook is required;

[JoviDeCroock]

I have a working version in https://github.com/preactjs/preact/pull/3583 just need to update some of the server-side libraries to add support for the _children and _parent properties 😅