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

@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).

I would like to note if you’d like to select an element in the DOM where it has its ID generated by useId, you can do something like the following:

const buttonRight = containerElement?.querySelector(`[id="${buttonRightSelector}"]`);

https://github.com/typehero/typehero/blob/main/apps/web/src/components/carousel.tsx

Where buttonRightSelector is the string ID generated. Just a suggestion if you get stuck on it not working as a valid selector.

As an element id it works, as long as you are in JS. but not when you are trying to write a CSS selector. As #:gen-id: {} is not a valid CSS sector

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.

Please fix it

I would like to note if you’d like to select an element in the DOM where it has its ID generated by useId, you can do something like the following:

const buttonRight = containerElement?.querySelector(`[id="${buttonRightSelector}"]`);

https://github.com/typehero/typehero/blob/main/apps/web/src/components/carousel.tsx

Where buttonRightSelector is the string ID generated. Just a suggestion if you get stuck on it not working as a valid selector.

it’s unfortunate that : was selected as the delimiter. stops us from targeting the element within a inline style block

const breakpointMap = {
  base: 0,
  xs: 375,
  sm: 768,
  md: 1024,
  lg: 1128,
  xl: 1500,
  xxl: 1920,
} as const;
const keys = Object.keys(breakpointMap) as (keyof typeof breakpointMap)[];
export const MediaQuery = ({
  only,
  up,
  down,
  display = 'contents',
  children,
}: Props): JSX.Element => {
  const id = useId();
  const query = only
    ? `min-width: ${breakpointMap[only]}px and max-width: ${
        breakpointMap[keys[keys.indexOf(only) + 1]]
      }px`
    : up && down
    ? `min-width: ${breakpointMap[up]}px and max-width: ${breakpointMap[down]}px`
    : up
    ? `min-width: ${breakpointMap[up]}px`
    : `max-width: ${breakpointMap[down]}px`;
  return (
    <>
      <div id={id}>{children}</div>
      <style>{`
#${id} {
  display: none;
}
@media (${query}) {
  #${id} {
    display: ${display};
  }
}
      `}</style>
    </>
  );
};

result:

<div id=":S1:">
<style>
#:S1: {
  display: none;
}
@media (min-width: 1024px) {
  #:S1: {
    display: contents;
  }
}
</style>

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

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`)