Duplicated useId values

[grefrit]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
Sometimes useId() values are duplicated. I saw this strange behavior in @headlessui/react components. Headlessui uses useId only when available (to support React 17). In development I use React 17 and everything looks normal, but in production I'm switching React to Preact 10.11.1 and see this in some situations

As you can see values are duplicated. I can confirm that is it issue in Preact, not headlessui, because it works when headlessui not using useId hook. It is very strange that this does not happen in all elements, but only in some. I said about headlessui, because I'm not using useId hook myself, so I don't know how to reproduce this behavior. I will try to do my best and provide some reproduction later. Also I can add that this strange behavior happens in this two elements

So to sum up.

1. This happens sometimes, I can't find some logic when it happens, it just duplicates value, very strange
2. I told about headlessui, because I don't use useId hook myself and I don't know how to reproduce this

To Reproduce
Try to provide soon
UPD: #3757 (comment)

Expected behavior
Values of useId should be unique

[marvinhagemeister]

Found a minimal reproduction case:

import { useId } from "preact/hooks";

function Foo() {
  const id = useId();
  return <p>{id}</p>;
}

function App() {
  return (
    <div>
      <Foo />
      <>
        <Foo />
      </>
    </div>
  );
}

[JoviDeCroock]

Hmm that makes sense, we have a condition to skip fragments. We should disable that and ensure we leverage a root-wrapping fragment in render to string

[marvinhagemeister]

@JoviDeCroock currently trying that out, but getting mismatches with render to string. My hunch so far is that the implicit Fragment wrapping we do for array children is different from core.

[marvinhagemeister]

Here is a test case where I can force mismatches with RTS:

function Foo() {
  const id = useId();
  return <p>{id}</p>;
}

function Bar(props) {
  return props.children;
}

function App() {
  return (
    <Bar>
      <Foo />
      <Fragment>
        <Foo />
      </Fragment>
    </Bar>
  );
}

[JoviDeCroock]

Concretely to solve this I think we need to:

• start from the parent
• transform this into fragment wrapping
• remove the fragment bailout

I might be forgetting a case with the implicit fragment wrapping though 😅 don't have a lot of time this week but can look over the weekend.

[Armster15]

Unless if I'm doing something wrong, this issue seems to still be occurring even with 10.11.12.
Like grefrit, I too am using Headless UI and the IDs generated by Preact seem to be non unique.

A reproducible repository: https://github.com/Armster15/preact-duplicate-id
Live Demo: https://preact-duplicate-id.vercel.app/
An image showing the duplicate IDs:

For others coming across this issue, downgrading to Preact 10.10.6 worked for me. This release does not include a useId hook, and as such, Headless UI will provide its own implementation of the hook, which seems to be working as intended.

[marvinhagemeister]

@Armster15 That's because we haven't cut a new release yet. Will do so momentarily.