react: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null after updating to React 16
Do you want to request a feature or report a bug? Bug
What is the current behavior?
Page load throws console error: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
// Chrome console
6VM598:27 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
window.console.error @ VM598:27
printWarning @ warning.js:36
warning @ warning.js:60
mountIndeterminateComponent @ react-dom.development.js:10488
beginWork @ react-dom.development.js:10647
performUnitOfWork @ react-dom.development.js:12621
workLoop @ react-dom.development.js:12730
callCallback @ react-dom.development.js:1319
invokeGuardedCallbackDev @ react-dom.development.js:1358
invokeGuardedCallback @ react-dom.development.js:1215
performWork @ react-dom.development.js:12848
batchedUpdates @ react-dom.development.js:13292
performFiberBatchedUpdates @ react-dom.development.js:1666
stackBatchedUpdates @ react-dom.development.js:1657
batchedUpdates @ react-dom.development.js:1671
batchedUpdatesWithControlledComponents @ react-dom.development.js:1684
dispatchEvent @ react-dom.development.js:1894
What is the expected behavior? No console error. Or at least some way to trace which is the stateless component that is causing the issue.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.0.0-rc.3",
Chrome Version 60.0.3112.113 (Official Build) (64-bit)
macOS Sierra 10.12.6
- This error only started to appear after upgrading from React 15 -> 16.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 5
- Comments: 22 (1 by maintainers)
When 16.1 is released. Which will happen within a week or two.
OK, I have a fix for the
nullthing in https://github.com/facebook/react/pull/10915. Note that, as I said above, the warning itself is correct.@gaearon I found this bug in lib antd@2.12.8
And reproduce in: https://codesandbox.io/s/931pp9zv0p
You need click on left button
Thanks for reporting the issue! We’ll change the error message to show the stateless component that is causing the issue.
when this fix will get released?
As I already said in an earlier comment there is no need to leave a comment in this thread if you don’t provide a project on GitHub that reproduces it.
The warning itself is legitimate. It points out a real problem that should be fixed either in your app or a library you use. You should not be trying to pass a ref to a functional component since it won’t work. React now warns you about this.
However, the warning should also display a stack instead of “null” at the end. If you see “null” at the end of the message, your development environment is messed up, and you have multiple versions of React and ReactDOM in the bundle. You need to fix it yourself, there is no way we can fix it for you.
To check you can run:
Do you see more than one React? That’s the problem. Remove the extra one and file an issue with the library that brought it in. React should be a peer dependency, not a dependency.
Do the same for
react-dom:See more than one? That’s the issue. Remove the extra one and file an issue with the library that brought that dependency.
If after all these steps the issue is unsolved, upload your project on GitHub and provide a link. Then we can look at what’s causing it.
Thanks!
@gaearon https://github.com/Luchanso/issue-react-16
Issue code: https://github.com/Luchanso/issue-react-16/blob/master/src/App.js#L6