Better error message when useEffect is called with no parameters
See original GitHub issueDo you want to request a feature or report a bug?
Feature
What is the current behavior?
Suppose you give an undefined
object or forget to provide parameters to useEffect
:
const App = () => {
React.useEffect();
return "";
};
ReactDOM.render(<App />, document.getElementById('container'));
On JSFiddle (https://jsfiddle.net/g39javzq), this error stack is logged:
Uncaught TypeError: create is not a function
at commitHookEffectList (react-dom.development.js:17372)
at commitPassiveHookEffects (react-dom.development.js:17396)
at HTMLUnknownElement.callCallback (react-dom.development.js:143)
at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
at invokeGuardedCallback (react-dom.development.js:250)
at commitPassiveEffects (react-dom.development.js:18863)
at wrapped (react.development.js:1353)
at flushFirstCallback (react.development.js:587)
at flushWork (react.development.js:699)
at MessagePort.channel.port1.onmessage (react.development.js:1093)
…though on a local project in React 16.8.4, this stack is logged:
Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at _iterableToArrayLimit (my-project.chunk.js:123)
at _slicedToArray (my-project.chunk.js:456)
at MyComponent (myFile.js:7)
What is the expected behavior?
Neither of these were useful during the 5 minutes it took to find the culprit useEffect
that should have been a useState
.
In development, we check for an undefined
deps
argument in useEffect
and give a better warning?
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8.4, Chrome on Mac.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:5 (1 by maintainers)
Top Results From Across the Web
React useEffect: Use data not defined as parameter
I thought so, but it's giving me this issue: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the...
Read more >React.useEffect Hook – Common Problems and How to Fix ...
The first and probably most obvious option is to remove the dependency from the useEffect dependency array, ignore the ESLint rule, and move...
Read more >What is useEffect hook and how do you use it?
From the Previous section , we said the first argument to useEffect is a function called effect . effect takes no parameters and...
Read more >How the useEffect Hook Works (with Examples) - Dave Ceddia
Passing no 2nd argument causes the useEffect to run every render. Then, when it runs, it fetches the data and updates the state....
Read more >The last guide to the useEffect Hook you'll ever need
The code is more explicit in contrast to effects, so developers can ... Because we skipped the second argument, this useEffect is called...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Sure, want to send a PR?
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!