useId generates duplicate identifiers in some cases when calling render from @preact/compat multiple times

[Kauhsa]

useId generates duplicate identifiers in some cases when calling render from @preact/compat multiple times.

To Reproduce

Run the following in browser of your choice (I used Chrome 119.0.6045.159):

<script type="module">
    import { createElement, useId, render } from 'https://esm.sh/@preact/[email protected]';
    
    // You can check React behaviour with replacing the import above with this:
    // import { createElement, useId } from 'https://esm.sh/stable/[email protected]/es2022/react.mjs'
    // import { render } from 'https://esm.sh/stable/[email protected]/es2022/react-dom.mjs'
    
    const e = createElement;

    const Id = () => {
        const id = useId();
        return e('div', {}, `My id is ${id}`);
    }

    const App = (props) => {
        return e('div', {}, [
            e(Id, {}),
            props.secondId ? e(Id, {}) : null,
        ]);
    }

    render(e(App, { secondId: false }), document.body);
    render(e(App, { secondId: true }), document.body);
</script>

Preact renders the following:

My id is P0-0
My id is P0-0

If line render(e(App, { secondId: false }), document.body); is removed, identifiers are unique:

My id is P0-0
My id is P0-1

Expected behavior

Non-unique identifiers cause issues when using return values as HTML id parameters, for example. React seems to handle this properly:

My id is :r0:
My id is :r1:

I am unsure if multiple calls to render function is intended usage of API in preact, but even if not, @preact/compat probably should replicate the behaviour of React here?

[marvinhagemeister]

We probably need something similar to React's identifierPrefix option which adds a prefix for ids depending on which render function is used, see https://react.dev/reference/react/useId#specifying-a-shared-prefix-for-all-generated-ids

[Kauhsa]

We probably need something similar to React's identifierPrefix option which adds a prefix for ids depending on which render function is used, see https://react.dev/reference/react/useId#specifying-a-shared-prefix-for-all-generated-ids

While that would be appreciated as well, it is a different issue. Note that here both render calls target the same root (i.e. I am merely trying to update DOM with new contents). identifierPrefix is, as far as I understand it, intended for cases where React (or Preact, I suppose) is rendered simultaneously to multiple separate roots. That case seems to already have an issue here: #3781

[Kauhsa]

Thanks for the fix! A great Christmas present! 😄