[Bug]: useId triggers a hydration mismatch error

[Valerioageno]

Description

Using useId always trigger a hydration mismatch between server and client

Expected behaviour

No hydration errors should be triggered

How to reproduce

1. Create any new tuono project tuono new project
2. Add a useId and render it in any place of the application

// index.tsx
import type { JSX } from "react";
import { useId } from "react";


export default function IndexPage(): JSX.Element {
  const myId = useId();

  return <>{myId}</>
}

Screenshots

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i5-13600KF
    Memory: 11.69 GB / 15.53 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.12.3 - ~/.local/share/pnpm/pnpm
  npmPackages:
    tuono: 0.17.1 => 0.17.1

System info (Rust)

rustc 1.82.0 (f6e511eec 2024-10-15)
cargo 1.82.0 (8f40fc59f 2024-08-21)
tuono 0.17.1

Additional context

#364 (comment)

[marcalexiei]

From #364 (comment):

I'm wondering if the problem can be the differences between the script/meta tags in the server/client.

// server
const stream = await renderToReadableStream(
      <>
        <RouterProvider router={router} serverProps={serverProps as never} />

        {mode === 'Dev' && <DevResources />}
        {mode === 'Prod' && (
          <ProdResources cssBundles={cssBundles} jsBundles={jsBundles} />
        )}

        <script>{`window.__TUONO_SSR_PROPS__=${payload as string}`}</script>
      </>,
    )

// client
 hydrateRoot(
    document,
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>,
  )

[marcalexiei]

Few useful reference from the official documentation: https://react.dev/reference/react/useId#usage:

Pitfall:
With server rendering, useId requires an identical component tree on the server and the client. If the trees you render on the server and the client don’t match exactly, the generated IDs won’t match.

---

Why is useId better than an incrementing counter?
[...]
Inside React, useId is generated from the “parent path” of the calling component. This is why, if the client and the server tree are the same, the “parent path” will match up regardless of rendering order.