[Slot] Access ref from props else fallback to element.ref #2811

chungweileong94 · 2024-04-02T14:11:29Z

Description

Starting from the React 18.3.0 canary, accessing the ref via element.ref will throw a warning, and element.ref will be removed in the future React release.

Instead, we should access the ref from props. To maintain the backward compatibility, we can do children.props.ref ?? children.ref.

ZipBrandon · 2024-04-06T14:10:38Z

Just chiming in to say that I had an issue with Portal when used in conjunction with framer-motion in the React canary releases since 19.0.0-canary-7a2609eed-20240403 and that this was the fix. Thank you.

alaney2 · 2024-04-10T00:48:02Z

Thanks for fixing this

borispoehland · 2024-04-10T07:12:22Z

Thank you!

tillka · 2024-04-26T12:07:30Z

Is there a way to fix this manually / locally until the official fix is out? The 7x 'element.ref' warnings I am getting on each page refresh are very annoying.

juliusmarminge · 2024-04-26T19:32:20Z

I also had to patch @radix-ui/react-presence to get rid of all warnings:

chungweileong94 · 2024-04-26T23:56:21Z

I also had to patch @radix-ui/react-presence to get rid of all warnings:

Ah thx, wasn’t able to find the others, will include this as well.

chungweileong94 · 2024-04-27T07:17:10Z

@juliusmarminge I applied the same fix to @radix-ui/react-presence too.

juliusmarminge

LGTM

tungv · 2024-05-06T13:16:09Z

Just a gentle reminder that this PR being merged and released is so valuable for a lot of people. Thank you.

eps1lon · 2024-05-15T12:02:12Z

packages/react/presence/src/Presence.tsx

-  const ref = useComposedRefs(presence.ref, (child as any).ref);
+  // Accessing the ref from props, else fallback to element.ref
+  // https://github.com/facebook/react/pull/28348
+  const childrenRef = child.props.ref ?? (child as any).ref;


It's fine to access child.ref conditionally. React only warns when accessing child.ref iff a ref prop is actually passed.

nicksrandall

LGTM

Brenndoerfer · 2024-05-25T20:31:24Z

Would be great to get an approval from one of the code owners on this.. it also impacts Shadcn/ui

alphaBiota · 2024-05-27T12:20:28Z

hey @andy-hook @benoitgrelard

hoping this gets approved soon. thanks!

sannajammeh · 2024-05-28T20:24:46Z

As this is taking a little while, here's how to suppress the annoying logs until its merged:

_supressLogs.ts

// TODO - delete when https://github.com/radix-ui/primitives/pull/2811 gets merged 
const prevConsoleError = console.error;
const prevConsoleWarn = console.warn;

console.error = (...args) => {
  if (args[0].includes("Warning: Accessing element.ref")) {
    return;
  }

  prevConsoleError(...args);
};

console.warn = (...args) => {
  if (args[0].includes("Warning: Accessing element.ref")) {
    return;
  }

  prevConsoleWarn(...args);
};

Import this globally at your app root.
For Next.js this would be

Root layout.tsx

import "./_supressLogs";
// Your root layout

And Root client provider file _Providers.tsx

"use client";

import "./_supressLogs";
// Your provider

bcanfield · 2024-05-31T12:22:39Z

lgtm

topaxi · 2024-06-03T12:17:23Z

Please stop unnecessarily approving this PR. It adds noise to anyone who is subscribed. As a maintainer of OSS stuff myself, I can guarantee you, that adding noise will not help push things forward. Maintainers will get to it when they have time, they are most certainly well aware that this is a desired issue/PR.

vladmoroz · 2024-06-04T12:53:27Z

Thanks for the contribution @chungweileong94. This will be integrated altogether with the other changes required to support React 19 in #2934

mooxl · 2024-06-20T15:19:18Z

the new version is out and resolves the ref issue 🪩

- This prevents a warning coming up for handling refs: radix-ui/primitives#2811

louishugens · 2024-11-20T03:51:06Z

Hello guys. I still get this error: 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. Is 1.1.0 the last version? I have a nextjs 15 project

chungweileong94 · 2024-11-20T04:01:33Z

Hello guys. I still get this error: 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. Is 1.1.0 the last version? I have a nextjs 15 project

That should be the latest version that contains the fix. If you are using component from shadcn ui, you will need to manually remove all the forwardRef usages. Best if you can provide a small repro if that doesn't solve your issue.

louishugens · 2024-11-20T04:31:53Z

Thanks @chungweileong94. I am indeed using shadcn-ui. It is complaining about this file node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx (66:71) but i can't locate it

chungweileong94 · 2024-11-20T05:08:13Z

Thanks @chungweileong94. I am indeed using shadcn-ui. It is complaining about this file node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot/dist/packages/react/slot/src/Slot.tsx (66:71) but i can't locate it

I looks like a dependency problem to me, have you try to update all the radix packages to the latest version?

louishugens · 2024-11-20T05:46:10Z

i did try to update. No success. Also i get this from time to time: Cannot update a component (HotReload) while rendering a different component (SlotClone). To locate the bad setState() call inside SlotClone, follow the stack trace as described in https://react.dev/link/setstate-in-render

lpbonomi · 2024-11-25T12:06:48Z

@louishugens @chungweileong94 I think that the problem is the react-slot package still has forwardedRef in it:

https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx

chungweileong94 · 2024-11-25T13:03:50Z

@louishugens @chungweileong94 I think that the problem is the react-slot package still has forwardedRef in it:

https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx

It's been awhile since I last created this PR, but as far as I can remember, the warning that React was throwing isn't about React.forwardRef, but instead it was about accessing the ref via element.ref. But it could be something new that I wasn't aware of.

f5io · 2024-11-25T13:28:53Z

@louishugens @chungweileong94 I think that the problem is the react-slot package still has forwardedRef in it:

https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx

in an attempt to update to react 18.3, i am seeing exactly this issue. i was under the impression that @radix-ui is ready for react 19, apologies if i'm being dumb, but what am i missing here?

edit: this is the error i am seeing:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `SlotClone`.

chungweileong94 · 2024-11-25T13:36:42Z

in an attempt to update to react 18.3, i am seeing exactly this issue. i was under the impression that @radix-ui is ready for react 19, apologies if i'm being dumb, but what am i missing here?

I don't think React 18.3 will suffer the same problem though. But mind if you can provide a small repro for the error that you are facing?

f5io · 2024-11-25T13:47:19Z

in an attempt to update to react 18.3, i am seeing exactly this issue. i was under the impression that @radix-ui is ready for react 19, apologies if i'm being dumb, but what am i missing here?

I don't think React 18.3 will suffer the same problem though. But mind if you can provide a small repro for the error that you are facing?

it appears after explicitly updating to react@rc this error disappears, as far as i can tell. if i find some time i will attempt a small repro against 18.3.

Hexi1997 · 2024-12-10T09:27:07Z

@louishugens @chungweileong94 I think that the problem is the react-slot package still has forwardedRef in it:

main/packages/react/slot/src/Slot.tsx

The problem still exists.

Access ref from props before element.ref

82bff21

chungweileong94 requested review from benoitgrelard, andy-hook, vladmoroz and lucasmotta as code owners April 2, 2024 14:11

chungweileong94 mentioned this pull request Apr 2, 2024

[Slot] React 18.3.0 canary, ref is now a regular prop #2769

Closed

dgriffith2023 approved these changes Apr 3, 2024

View reviewed changes

alitas approved these changes Apr 18, 2024

View reviewed changes

ZipBrandon mentioned this pull request Apr 18, 2024

[BUG] Elements do not animate in latest React 19 canaries motiondivision/motion#2624

Closed

Apply ref access fix to presence component

45b510a

chungweileong94 force-pushed the main branch from c12d3bd to 45b510a Compare April 27, 2024 07:15

juliusmarminge approved these changes Apr 27, 2024

View reviewed changes

bzmillerboy mentioned this pull request May 9, 2024

Slot component causes a warning in React 19 about accessing .ref directly #2890

Closed

eps1lon reviewed May 15, 2024

View reviewed changes

nicksrandall mentioned this pull request May 15, 2024

React 19 compatibility #2900

Closed

nicksrandall approved these changes May 23, 2024

View reviewed changes

Brenndoerfer approved these changes May 25, 2024

View reviewed changes

gtjamesa approved these changes May 25, 2024

View reviewed changes

milandekruijf approved these changes May 28, 2024

View reviewed changes

chungweileong94 mentioned this pull request May 30, 2024

Adding react 19 to peer deps #2924

Closed

ferothefox approved these changes May 30, 2024

View reviewed changes

spencemc approved these changes May 30, 2024

View reviewed changes

royce-mathew approved these changes May 30, 2024

View reviewed changes

xuanhao-bic approved these changes Jun 1, 2024

View reviewed changes

mooxl approved these changes Jun 3, 2024

View reviewed changes

vladmoroz mentioned this pull request Jun 4, 2024

React 19 compatibility #2934

Merged

vladmoroz closed this Jun 4, 2024

nikolailehbrink added a commit to nikolailehbrink/portfolio that referenced this pull request Jul 8, 2024

chore: update radix components

9dc07d5

- This prevents a warning coming up for handling refs: radix-ui/primitives#2811

lu-perfect mentioned this pull request Oct 23, 2024

[Support React 19]: FocusTrap causes an error when opening modal in React 19 due to deprecated element.ref gravity-ui/uikit#1914

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Slot] Access ref from props else fallback to element.ref #2811

[Slot] Access ref from props else fallback to element.ref #2811

chungweileong94 commented Apr 2, 2024

ZipBrandon commented Apr 6, 2024

alaney2 commented Apr 10, 2024

borispoehland commented Apr 10, 2024

tillka commented Apr 26, 2024

juliusmarminge commented Apr 26, 2024

chungweileong94 commented Apr 26, 2024 •

edited

Loading

chungweileong94 commented Apr 27, 2024

juliusmarminge left a comment

tungv commented May 6, 2024

eps1lon May 15, 2024

nicksrandall left a comment

Brenndoerfer commented May 25, 2024

alphaBiota commented May 27, 2024

sannajammeh commented May 28, 2024 •

edited

Loading

bcanfield commented May 31, 2024

topaxi commented Jun 3, 2024

vladmoroz commented Jun 4, 2024

mooxl commented Jun 20, 2024 •

edited

Loading

louishugens commented Nov 20, 2024

chungweileong94 commented Nov 20, 2024 •

edited

Loading

louishugens commented Nov 20, 2024

chungweileong94 commented Nov 20, 2024

louishugens commented Nov 20, 2024

lpbonomi commented Nov 25, 2024

chungweileong94 commented Nov 25, 2024

f5io commented Nov 25, 2024 •

edited

Loading

chungweileong94 commented Nov 25, 2024

f5io commented Nov 25, 2024

Hexi1997 commented Dec 10, 2024

[Slot] Access ref from props else fallback to element.ref #2811

[Slot] Access ref from props else fallback to element.ref #2811

Conversation

chungweileong94 commented Apr 2, 2024

Description

ZipBrandon commented Apr 6, 2024

alaney2 commented Apr 10, 2024

borispoehland commented Apr 10, 2024

tillka commented Apr 26, 2024

juliusmarminge commented Apr 26, 2024

chungweileong94 commented Apr 26, 2024 • edited Loading

chungweileong94 commented Apr 27, 2024

juliusmarminge left a comment

Choose a reason for hiding this comment

tungv commented May 6, 2024

eps1lon May 15, 2024

Choose a reason for hiding this comment

nicksrandall left a comment

Choose a reason for hiding this comment

Brenndoerfer commented May 25, 2024

alphaBiota commented May 27, 2024

sannajammeh commented May 28, 2024 • edited Loading

bcanfield commented May 31, 2024

topaxi commented Jun 3, 2024

vladmoroz commented Jun 4, 2024

mooxl commented Jun 20, 2024 • edited Loading

louishugens commented Nov 20, 2024

chungweileong94 commented Nov 20, 2024 • edited Loading

louishugens commented Nov 20, 2024

chungweileong94 commented Nov 20, 2024

louishugens commented Nov 20, 2024

lpbonomi commented Nov 25, 2024

chungweileong94 commented Nov 25, 2024

f5io commented Nov 25, 2024 • edited Loading

chungweileong94 commented Nov 25, 2024

f5io commented Nov 25, 2024

Hexi1997 commented Dec 10, 2024

chungweileong94 commented Apr 26, 2024 •

edited

Loading

sannajammeh commented May 28, 2024 •

edited

Loading

mooxl commented Jun 20, 2024 •

edited

Loading

chungweileong94 commented Nov 20, 2024 •

edited

Loading

f5io commented Nov 25, 2024 •

edited

Loading