Shot in the dark here, do you have any extensions turned on? That's like 90% of my hydration errors

useId() itself is safe, but hydration issues usually show up when the component tree differs between server and client. In client components this often happens if the number or order of useId() calls changes due to ocnditional rendering, early returns, or list reordering. The IDs are deterministic only when the render structure is identical on both sides.

i dont think useId is source of hydration errors u see

it was in the error itself

which i could have included here

Plz do

To answer your question: No, it's not discouraged, but it's tricky. useId is designed to be stable, but if your HTML structure changes between Server and Client (even a tiny bit), React loses track and throws that error.

You probably have some logic wrapped around the component that's causing a mismatch, or you're using a version of Next.js/React where the streaming doesn't sync the ID correctly.

const listboxIdRef = useRef(city-search-${Math.random()) has the same issue

@Gray-tailed Tattler may I see the snippet of the component ?

Claude already got in there and fixed with this admittedly not super elegant fix

 const [listboxId, setListboxId] = useState<string | null>(null)

  useEffect(() => {
    setListboxId(`city-search-${Math.random().toString(36).slice(2, 9)}`)
  }, [])

so now it's just making sure to only generate the id in the client and not the server right

This makes sense because then it would only happen when the component mounts and then it would have to be a client component at that point

i come from using Alpine.js pretty heavily and using their $id magic so im in the habit of just adding unique id's to avoid collisions but i'm probably overusing them.

which components are causing hydration errors?

useId() is supposed to solve hydration error lol

for real. i face this with multiple projects

the useId() in my radix component has the same mismatch

iirc radix wasn't using useId() up until recently

they had a bug thats commonly reported and when i looked into the components they had used math.random instead of useId()

what component is this?

Um the form something. Afk

it's bad code

and it's nextjs/turbopack error

it happens since some v15 canary release

that;s what happens when there is major release every 4/5 months

What should I do instead?

use useId

this error is gone in production so w/e

or leave nextjs and never come back to it

depends

use useId from react, to be more specific

This is a React issue introduced in Next.js 15.5.*. Still present in 16.1.6 afaik. It’s fixed in the latest 16.2.x canary.

It doesn’t just happen with useId, but that’s where it happens most commonly. Sometimes you can suppress it, often it’s impossible to suppress. Upgrading or downgrading is the only fix

I have never thought of triying with Firefox/Safari 🤔

yes it seems to be fixed in the 16.1.1-canary.32, but still the stable release (16.1.6) is broken till today.

Yeah I am

probably a silly thing to upgrade to the canary for right? just wait for a new minor/major release?

@Alessio🍣 what do you think?

Upgrade to canary or stay on 15.4.11 if it was up to me.

hearing useId() for the first time today