Fix SSR tab rendering on React 17

[thecrypticace]

We currently use unique IDs to figure out what tabs should be visible. This works fine in React 18 but not in React 17 where useId doesn't exist. We have our own useId hook but it doesn't work with SSR because React internals don't provide necessary information across the client and server to determine a stable ID. (Technically the client can but the server cannot). The best fix for this is really to upgrade to React 18 and all these problems disappear.

So we've tweaked our setup a bit to work better with React 17 SSR. The main problems here are:

1. Testing this is very difficult hence some of the changes I've had to make.
2. It is not possible to make this work with Strict Mode in React. Unfortunately, due to the double render of child components, counters held in context of parent components are unreliable. There is no way around this — even diving into React internals. So, in development, you will see hydration errors if your app uses Strict Mode and SSR.

I haven't mirrored any of these changes to Vue because SSR works differently there and doesn't have double rendering problems. Some of the architectural changes should be carried over though. I want to validate this approach before I do that.

Fixes #1488

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
headlessui-react	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 5:49PM (UTC)
headlessui-vue	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 5:49PM (UTC)