Warning if React.forwardRef render function doesn't take exactly two arguments is confusing when more than 2 arguments

[andresroberto]

Do you want to request a feature or report a bug?

A feature (an improvement)

What is the current behavior?

When defining more than two parameters for a React.forwardRef render function a warning message stating "forwardRef render functions accept two parameters: props and ref. Did you forget to use the ref parameter?" gets logged.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/5v704qxvnx

What is the expected behavior?

Option 1

Overall the message could be more explicit on accepting exactly two parameters. Also, when the arity is greater than 2 the second part of the message may be omitted. For instance:

""forwardRef render functions accept exactly two parameters: props and ref"

Option 2

If defining more than 2 arguments to the function is ok, which may be the case since the real goal for this warning is just to make sure people use the ref parameter, I think the message could not be shown for arity > 2, therefore chaging the condition of === 2 to > 1.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.5.0 which is the one that includes this new warning

[gaearon]

Happy to take a PR for “option 1”.

The purpose of accepting more arguments is not clear to me because they’d never get filled in.

[andresroberto]

Cool. I will make a PR tonight

[jquense]

We might want to add a note about an argument rest as well? forwardRef((...args) => render(...args)) also warning in a confusing manor since it's transpiled to use arguments directly

[gaearon]

I think it shouldn't warn about 0 arguments.

[gaearon]

Should be fixed in 16.5.1

[sachbazjan]

This warning is still visible in react 17.0.1

[enoh-barbu]

I've just got this error after running npm update. (React v17)

[enoh-barbu]

Just put a debugger and saw that these errors ar comming from MUI

[momolly1024]

Just put a debugger and saw that these errors ar comming from MUI

Me too

[gvanriper]

Just put a debugger and saw that these errors ar comming from MUI

Yes, I am reporting this issue as well. Will create a ticket for MUI if there isn't one already.

[gvanriper]

Hey all, if you're receiving this from MUI, do you happen to be using the x-date-picker imported from mui/lab? If so, switch to the separated mui/x-date-picker npm package.

The date picker from mui/lab has been deprecated and it's improperly using forwardRef:

[enoh-barbu]

@gvanriper yes, that was the reason, already switched. Thanks for letting others know

[ubRoman]

Hello all,
in my own component (Reactjs+TypeScript) I want to use forwarded ref optionally.
I have achieved this with a default value - it works fine. The second param looks like this:

const myComp = React.forwardRef(... , ref: React.ForwardedRef<HTMLDivElement> = useRef<HTMLDivElement>(null))

Unfortunatelly in browser Im getting this irritating warning, even if I pass the ref from the top component.
Can I suppress the warning or is there another solution with TypeScript in such cases?

Especially the warning is very annoying in jest logs.