Hydration mismatch using react-renderer and shadcn/ui form, dropdown-menu etc.

[bostjanpisler]

What version of HonoX are you using?

0.1.27

What steps can reproduce the bug?

1. Create hono x-basic
2. Replace hono jsx render with hono react-renderer
3. Install shadcn/ui form component

What is the expected behavior?

Server and client rendered components match and no warning is logged.

What do you see instead?

"Warning: Prop htmlFor did not match. Server: ":Riq:-form-item" Client: ":R9:-form-item" Error Component Stack"

Additional information

React.useId() generates different IDs during server-side rendering and client-side hydration. This is happening in FormItem component where we're using useId() to generate unique identifiers. The form component was not modified after it was installed.

[ElasticBottle]

@bostjanpisler did you end up finding a workaround for this?

[bostjanpisler]

No, was unable to find a solution so far.