future of ComponentPropsWithoutRef and React 19

[logemann]

What component (if applicable)
catalyst components

Describe the bug
Its not really a bug but merely a hint / suggestion

Throughout the catalyst component library, we will have the typical usage of React.ComponentPropsWithoutRef. I wonder if this apporach is still viable with the advent of React 19.

AFAIK we can safely pass in a ref as prop from the outside now and this should also be possibe with the catalyst components shouldnt it?

[reinink]

Hey!

Yeah we definitely have our eyes on React 19, but given that it hasn't even officially been released yet Catalyst is going to remain a React 18 project for now.

That said, I just tried using Catalyst in a React 19 project and it appeared to work, so that's good news at least for anyone wanting to use Catalyst on the bleeding-edge. But fair warning, I hardly tested this extensively 😅

Also keep in mind that not all dependencies are React 19 compatible yet, so you'll need to use the --force flag when installing these dependencies together.

Once React 19 becomes the de facto React version we'll definitely revisit this — I for one would love to remove all the forwardRef calls in this project! 🙌

Hope that makes sense!

[logemann]

I am already using catalyst with React 19 with our brand new project. So yeah... everything good. Just wanted to give you a hint there... Sorry for the noise in the bug tracker ;-)

Update: of course there some browser console warnings from headlessui for instance like:
app-index.js:34 Warning: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

But anyway.. nothing that bugs me at this point ;-)

[Yue13-Y]

Sorry if this is off-topic, but would it be safe to change the component type to ComponentPropsWithRef?
I'm adding an event listener to a Text component, and I noticed that most components are declared with ComponentPropsWithoutRef. Will this change potentially break anything?

[reinink]

Hey folks, just a heads up that we've updated Headless UI to support React 19: tailwindlabs/headlessui#3543. You can upgrade to this latest version by running:

npm install @headlessui/react@latest

Note that ComponentPropsWithRef is technically backwards compatible, meaning it works still in React 19, although React 19 does warn if you use it. This is kind of annoying in Next.js v15 as they convert these React warnings to errors, even though technically it all works.

I suspect that once React 19 is out officially (it's still just a release candidate today) that we'll upgrade Catalyst to require React 19. Not going to lie, I look forward to removing the ComponentPropsWithRef calls from the Catalyst codebase! 😅