eslint-disable-next-line react-hooks/exhaustive-deps #11038
-
|
Hello Community I've been working on a simple grocery store app and suddenly had some issues with What is the use case?What i actually wanted to do is that, as the component mounts, I load some products from a server and set then within the component state. Then from a multiselect component, a user can select at most three products. When the user selects three products, the rest becomes disabled. What's the problem?The problem I'm actually facing is that if I add the requested dependency, I'm having an error What did you do?I actually started to google how to disable that linting then I fell on I admit 😅 i didn't understand everything knowing I'm still a junior dev. Can we have a working demo?Yeah I wrote a working demo on codesandbox . Here is the link : https://codesandbox.io/s/eslint-disable-next-line-e8cvk?file=/src/App.js In conclusion I just want to know if concerning my use case it's bad to use Thanks |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
You shouldn't disable eslint rules unless you know what you do :) This way you don't have to use products and add them as a useEffect dependency and you are guaranteed that the value of previousProducts is not stale :) The error you had was caused by an endless loop of updates. You ran useEffect that was depending on products, then you changed the value of products. useEffect noticed that and run again, changing the value of products, and so on... |
Beta Was this translation helpful? Give feedback.
-
|
Thanks much @przemyslav At least I now get it right 👍 |
Beta Was this translation helpful? Give feedback.
You shouldn't disable eslint rules unless you know what you do :)
Basically you should pass a function to setProducts to skip using products as products value is not reliable and might be stale.
So:
This way you don't have to use products and add them as a useEffect dependency and you are guaranteed that the value of previousProducts is not stale :)
The error you had was caused by an endless loop of updates. You ran useEffect that was depending on products, then you changed the value of products. useEffect noticed that and run again, changing the value of products, and so on...