useId hook

[dios-david]

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;

[kmcaloon]

Same with Reach UI. Running into errors when trying to switch to using preact/compat.

[JoviDeCroock]

I have a working version in #3583 just need to update some of the server-side libraries to add support for the _children and _parent properties 😅

[JoviDeCroock]

An issue that seems very apparent now coming to think about it is that a large amount of users use React on the server and Preact on the client 😅

[mjgerace]

@JoviDeCroock will you cut a new release soon with these changes?

[JoviDeCroock]

@mjgerace #3583 (comment) sorry but this is really getting on my nerves - we as a team have been busy with releasing signals which was a big task 😅 I am trying my very best to get to everyone but.... it's not as easy as it might look

[mjgerace]

@JoviDeCroock my apologies! I was just wondering about timeline - as you know, this will enable many folks to use React 18 component libraries safely. Please take the comment more as eagerness to be able to use new features rather than an attempt to annoy or beg. Take your time :)