Preparing for React 19

[desiboli]

Hi, @shadcn!

What's the plan for React 19?
Next.js was updated to React 19 on their Canary release. v14.3.0-canary.46.
Resulting in some warning messages and errors:
"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." and "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')".

Some of the changes in React 19:

• In React 19, ref becomes a regular prop that can be passed down through component hierarchies. This simplifies the usage of refs, as they are treated like any other prop, eliminating the need for forwardRef wrappers.
• The React Compiler also introduces a new use(Context) hook to replace the useContext hook. This hook simplifies the consumption of context values within components, aligning with the compiler's goal of reducing boilerplate code.

I'll wait to update Next.js for now, but I just wanted to hear when we can expect a huge change to a lot of your amazing components that use React.forwardRef today. 🙏

[joaopedrodcf]

Probably radix also needs to be updated to remove those warnings about forwardRef: radix-ui/primitives#2811 there is a PR already with a fix for slots etc

[desiboli]

Ahh that's right! 🙏

[shadcn]

I'm keeping an eye on radix-ui/primitives#2811 (I've been testing the patch and so far so good).

[Thijs-Lambert]

Seems like these changes are being merged over at radix-ui.
See radix-ui/primitives#2934

[emrosenf]

Merged

[EffTeeAitch]

The hero we don't deserve ❤️

[mbeps]

So ShadcnUI supports the React 19 compiler now?

[Tahmeed-programmer]

@shadcn any reply? what can i do as i am facing these errors - "Type 'ForwardRefExoticComponent<DialogContentProps & RefAttributes>' does not satisfy the constraint 'ElementType<any, keyof IntrinsicElements>'.
Type 'ForwardRefExoticComponent<DialogContentProps & RefAttributes>' is not assignable to type 'FunctionComponent'.
Type 'import("C:/Users/alamt/Desktop/Teach_Academy_Monorepo/node_modules/.pnpm/[email protected]/node_modules/types-react/index").ReactNode' is not assignable to type 'React.ReactNode'."?

[killjin]

https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/new-york/ui/button.tsx
When will it be deleted?

[yousuf123456]

I am still facing the issues till this date. Any update on this issue?

[Aleksion]

@shadcn did you ever release the migrate react-19-refs?

[token-ed]

@shadcn thanks for the amazing work you do.
Do you have a plan to push the migration to be compatible with React 19?

[TeachAcademyDev]

check his docs, i have seen react 19 setup already

[token-ed]

check his docs, i have seen react 19 setup already

Good man 🤝
Looks like the canary release is already compatible. Leaving it here for anyone else stumbling upon the same issue.