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
You can use useEffect/useLayoutEffect to achieve this: More about it over here. If you are looking for an out of the box solution, check out this custom hook that works like useState but accepts as second parameter a callback function:
You can use useEffect/useLayoutEffect to achieve this: More about it over here. If you are looking for an out of the box solution, check out this custom hook that works like useState but accepts as second parameter a callback function:
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
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
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