Change:
<!-- Note: if the issue is about documentation or the website, please file it at: --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 () or CodeSandbox () example below: 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 to . Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? 0 which is the one that includes this new warning
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.
Cool. I will make a PR tonight
We might want to add a note about an argument rest as well? also warning in a confusing manor since it's transpiled to use directly
I think it shouldn't warn about 0 arguments.
Should be fixed in 16.5.1
This warning is still visible in react 17.0.1
I've just got this error after running npm update. (React v17)
Just put a debugger and saw that these errors ar comming from MUI
Me too
Yes, I am reporting this issue as well. Will create a ticket for MUI if there isn't one already.
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: <img width="1326" alt="Screen Shot 2022-06-15 at 10 04 42 AM" src="https://user-"
yes, that was the reason, already switched. Thanks for letting others know
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: 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.

Discussion:
); }); <del> it('should warn if the render function provided does not use the forwarded ref parameter', () => { function arityOfZero() { return null; } </del> <ins> it('should not warn if the render function provided does not use any parameter', () => { const arityOfZero = () => <div ref={arguments[1]} />; React.forwardRef(arityOfZero); }); </ins> <del> const arityOfOne = props => null; </del> <ins> it('should warn if the render function provided does not use the forwarded ref parameter', () => { const arityOfOne = props => <div {...props} />; </ins> <del> expect(() => React.forwardRef(arityOfZero)).toWarnDev( 'forwardRef render functions accept two parameters: props and ref. ' + </del> <ins> expect(() => React.forwardRef(arityOfOne)).toWarnDev( 'forwardRef render functions accept exactly two parameters: props and ref. ' + </ins> 'Did you forget to use the ref parameter?', {withoutStack: true}, ); <ins> }); </ins> <del> expect(() => React.forwardRef(arityOfOne)).toWarnDev( 'forwardRef render functions accept two parameters: props and ref. ' + 'Did you forget to use the ref parameter?', </del> <ins> it('should not warn if the render function provided use exactly two parameters', () => { const arityOfTwo = (props, ref) => <div {...props} ref={ref} />; React.forwardRef(arityOfTwo); }); it('should warn if the render function provided expects to use more than two parameters', () => { const arityOfThree = (props, ref, x) => <div {...props} ref={ref} x={x} />; expect(() => React.forwardRef(arityOfThree)).toWarnDev( 'forwardRef render functions accept exactly two parameters: props and ref. ' + 'Any additional parameter will be undefined.', </ins> {withoutStack: true}, ); });

); } else { warningWithoutStack( <del> render.length === 2, 'forwardRef render functions accept two parameters: props and ref. ' + 'Did you forget to use the ref parameter?', </del> <ins> // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object render.length === 0 || render.length === 2, 'forwardRef render functions accept exactly two parameters: props and ref. %s', render.length === 1 ? 'Did you forget to use the ref parameter?' : 'Any additional parameter will be undefined.', </ins> ); }