Uncaught Invariant Violation: Rendered more hooks than during the previous render

The fix works because the first code sample (the erroring one) invokes a function inside onClick, while the second (the working one) passes a function to onClick. The difference is those all-important parentheses, which in JavaScript mean ‘invoke this code’. Think of it this way: in the first code sample, every time component is rendered, renderResults is invoked. Every time that … Read more

React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

I suggest to look at Dan Abramov (one of the React core maintainers) answer here: I think you’re making it more complicated than it needs to be. Longer term we’ll discourage this pattern because it encourages race conditions. Such as — anything could happen between your call starts and ends, and you could have gotten new … Read more

How to fix missing dependency warning when using useEffect React Hook

If you aren’t using fetchBusinesses method anywhere apart from the effect, you could simply move it into the effect and avoid the warning If however you are using fetchBusinesses outside of render, you must note two things Is there any issue with you not passing fetchBusinesses as a method when it’s used during mount with its enclosing closure? Does … Read more

Understanding the React Hooks ‘exhaustive-deps’ lint rule

The reason the linter rule wants onChange to go into the useEffect hook is because it’s possible for onChange to change between renders, and the lint rule is intended to prevent that sort of “stale data” reference. For example: Every single render of MyParentComponent will pass a different onChange function to MyCustomComponent. In your specific case, you probably don’t care: you only want to call onChange when the … Read more