Bug: useId IDs have special characters that conflict with certain DSLs (like CSS)

[EthanStandel]

The ID scheme for the useId hook returns IDs that look like ":S1:", but : is not a valid character for CSS identifiers and must be escaped. On client-only components, you can wrap the ID in CSS.escape but the CSS global object doesn't exist on the server so this doesn't work for server-component renders.

React version: 18.2

Steps To Reproduce

1. Try utilizing the id's created by useId in CSS identifiers.
2. It doesn't work.

Link to code example: https://stackblitz.com/edit/react-ts-zhtk6u?file=Example.tsx

The current behavior

The current implementation of useId creates IDs with special characters which can conflict with certain DSLs (in this example, CSS) that React has to commonly interact with.

The expected behavior

Don't use special characters in IDs created by useId.

[gaearon]

I believe that's intentional to prevent collisions with manually chosen IDs.

Not sure if there's a more appropriate solution for your case.

[EthanStandel]

@gaearon I figured the naming scheme was to avoid any potential conflict. My preference would be an ID generation model that uses a non-special character wrapping or just a GUID.

e.g. REACTIDS1 or f2ba2bd18ae847a0beb78f57f58d836d

However, if the wrapping characters were changed from : (colon) to either - (dash) or _ (underscore) then the IDs at least wouldn't conflict with CSS.

e.g. _S1_ or -S1-

I know React itself isn't really supposed to be making changes specific to the web, but I do think underscores in particular are far less likely to conflict with other DSLs. I also feel like this is a good use-case for useId which is made more challenging because of this issue (this case is actually the first time I've needed useId, personally).

[dkryaklin]

In my project, I utilize adobe/react-spectrum, which has recently integrated React.useId() for generating IDs for elements. You can find an example of this integration here.

On the surface, this change appears harmless. However, a problem arises when the generated ID serves not only as a mere identifier but also as a link between various elements, such as in the case of the 'aria-labelledby' attribute.

For instance, consider the following example, which was valid before react-spectrum began utilizing React.useId():

notifications
  .getButton()
  .should('have.attr', 'aria-labelledby')
  .then((ariaLabelledBy) => {
    cy.get(`#${ariaLabelledBy}`)
      .should('match', 'label')
  });

As evident from the above code snippet, we do not have control over the button's ID or the 'aria-labelledby' value. Consequently, this code fails with the new version since the colon (:) is not a valid selector and causes cy.get to fail.

This situation begs the question: who should be responsible for supplying a valid ID value?

[EthanStandel]

The reason I would argue that I think that it's reasonable for React to own this fix is that the id prop for HTML elements is the defacto use-case given in the React docs the the useId hook.

Also React owns useInsertionEffect which they say is specifically for supporting CSS-in-JS libraries.

So I don't think that useId IDs being able to be used in HTML and referenced in CSS (or Cypress queries) should be considered outside of the bounds of React's responsibilities.

[beamery-tomht]

Accessibility libraries are using useId here to generate unique IDs on elements that are referenced

The cypress test above looks to be testing an accessibility criteria that the id should match the value of an aria-labelledby element

This can also apply for many other accessibility criteria such as:

• htmlFor
• aria-owns
• aria-controls
• aria-describedby
• aria-activedescendant
• etc....

It's then reasonable to assume that consumers of the library would be testing that these implementations of a11y attributes are rendered correctly... as they would aim to be library agnostic of course... and now each consumer will face these invalid characters in the unique ID...

Why not just make the IDs use valid characters...?

Are you suggesting that libraries should write their own useId implementation for unique ID generation so that they can support these a11y criteria? That would give them complications for consistent IDs on server side rendering - I'd assume it would make sense to support their use case with the inbuilt hook

[devongovett]

To be clear, the ids generated by react are valid, and do work correctly for accessibility purposes. In your tests, you can use getElementById to find the element instead of querySelector with a manually prepended #. Alternatively if you need a more complex selector, the id can be escaped with the built in CSS.escape function:

document.querySelector(`#${CSS.escape(someId)} > .foo`)

[EthanStandel]

But in terms of generating CSS (which you may want to do by creating a style element which may happen on the server), you may not have access to CSS.escape. Plus, it's kind of weird that we should have to escape it in the fairly common use-case of a CSS query.

[beamery-tomht]

Alternatively if you need a more complex selector, the id can be escaped with the built in CSS.escape function:

This is what we've had to do and cost us a lot of wasted time updating all of our tests to dodge this strange decision of putting colons in id values

[AMalfez]

Hi
I am Alfez mansuri.
I am new to open source and just came across this issue and tried my hands on it.
https://stackblitz.com/edit/react-ts-kvrc8e?file=Example.tsx
Please go through this.
I have added a function that removes the special characters from id.

[EthanStandel]

Hi I am Alfez mansuri. I am new to open source and just came across this issue and tried my hands on it. https://stackblitz.com/edit/react-ts-kvrc8e?file=Example.tsx Please go through this. I have added a function that removes the special characters from id.

That functionally works but... it's not really a good idea. The problem here is that React owns the generation of the ID. If you put this function in your code and then React changes how their ID generation implementation works and then you update React, you could end up with overlapping IDs. Like say that these become two separate IDs that React may return: as:df & as-df. Your function would convert them both to asdf, meaning that you'd have two copies of the same ID. If you use CSS.escape as is used in my example, there's no possible risk of that issue but of course CSS.escape doesn't work on the server. You could reimplement that, but you really shouldn't modify the ID.

In general though, this is definitely something that React must own the fix of so that the rest of us don't have to worry about it, or monkeypatch primitive hooks, or have to be concerned with how to handle the logic on the client & server separately for a DSL as commonly needed with React as CSS.