How did you use Math.random() in the client component? did you use it in hooks that would get prerendered in the server?

Have a client component file that imports the base ui tab component. I'm guessing the base ui component uses it internally. I didn't explicitly use Math.random() within my components.
The base ui tab indicator subcomponent gets flagged as using Math.random().

Don't get this error when cache components is disabled.

Interesting.

This is somewhat already a feature in the canary/beta space

They detects any uses of Math.random in pre-rendered client components as a way to tell the developers to avoid any rendering mis-match. As you know, next.js will try to pre-render client components as much as possible (until it can't) and the result will be hydrated again in the client which will make rendering happens twice

if you add Math.random it will produce mis-match between the server-pre-render phase and client-re-hydrating phase which will gives you the "Hydration" error just like usual

But now in v16, next goes an extra mile to "wrap" that error and give you a more informative error message to help developers avoid using math.random on pre-rendered client componnets

one way to avoid this is to avoid the pre-rendering phase of client component such as using the mounted state

export function NoSSRClientComponent(){
  const [mounted, setMounted] = useState(false)
  useEffect(() => setMounted(true), [])
  if (!mounted) return null 
  // at server will return this, resulting in blank initial state
  return <>{children}</> 
  // at client browser will hydrate this.
}

or just, wrap the thing with <Suspense>

Yeah I understand that but there are some things that don't add up. So this error only occurs with this base ui tabs component when cache components is enabled .
There is no error even on next 16 when cache components is disabled.
but weird thing is that if I try to explicitly use Math.random() on a client component, I get the error regardless if cache components are disabled or not.

So nextjs is flagging base ui tabs indicator subcomponent as using Math.random() but only gives the error when cache component is enabled.
But if explicitly use Math.random() in a client component, I will get the error when cache components is enabled and disabled.

interesting

yeah i have no idea why base ui does that

I looked through the source files for the tab component and figured out the cause. Base ui uses Math.random() internally within a useState() hook.
It seems that when cache components is disabled, Next only gives the error when Math.random() is used outside of a useState().
When cache components is enabled, Next gives an error regardless if Math.random() is used within a useState() hook or not.

it actually makes sense if you think about it

either you have to cache component (then Math.random() is cached) or use await connection() to ensure it's computed during request

also, if you want to use it in client component, you have to do that in useEffect or ensure it won't be ssr'ed

yeah but this is a Tab component which is weird to have it as CSR by default. What if i want to make tab based on searchparams?

one would assume base-ui is creating base component for wide variety of use cases...

for search params i'm using nuqs which provides loaders/parsers both for server and for client

cuz they are

yes but Tab would still give that Math.random error

it's related to nextjs, not base-ui

why would i need to put my Tab to be exclusively not rendered in the server?

it can be rendered server side

putting Tab out of SSR would hurt SEO and etc etc

just adjust ur code

it can but it would throw that Math.random error

had similiar issues after i opted-in (i used shadcn and next15 canary release)

just moved math random from useMemo to useEffect + setWidth

yes but you can't move the math random...

in my case it was fine since it was sidebar menu skeleton so it didnt flicker at all

math random is inside the source code of base-ui tabs component...

then you can reach base-ui maintainers

nothing else ig

yea now we are on the same page

wonder why they use Math.random in tabs tho

i can only guess one reason its to make automatic id generation so you dont have to pass in values to the TabItem or TabContent and just infer based on the order (since its stable list anyway)

in which at that point you should've used useId() instead of Math.random

they probably use React.useId()

otherwise you would get hydration errors

They should use useId I think but currently they are using math.random.

so theyre mixing the two... (?)

they use useId with prefix (if provided)

it has nothing to do with math random, must be something else

where did u find this code?

I was able to contact one of their devs. They are looking into it.

ooohh thats great news!

nothing usually moves around around here

The base ui devs are super quick to respond to issues.

They have pushed prs for a couple of my issues within a couple hours.

awesome, glad to hear that

duh

this generateId is for some instance id

whgatever it is

I suppose theyre working on it

Maybe u can pull up a quick PR 👀