In practice this leads to ignoring the rule, disabling the rule with a comment (and potentially forgetting to add vital dependencies when the function is updated), or adding a bunch of unnecessary noise to the dep array.
In practice this leads to ignoring the rule, disabling the rule with a comment (and potentially forgetting to add vital dependencies when the function is updated), or adding a bunch of unnecessary noise to the dep array.
There absolutely might be cases that can’t be solved, so I’m hoping to break out of my bubble and learn what they are!
useEffect(() => { doSomething(someState) }, [otherState])
An empty dependency array means that the effect runs only once on mount. Same with memos and callbacks -- the value should remain stable. Here's a real world example of how I populate some state based on url query params:
https://github.com/Naught0/combinator/blob/master/frontend/s...
I may end up using a more robust routing solution to keep in sync with query params if I ever want to spend the effort, but this is a naive solution that works alright.
A more simplified, generic example could be:
const [foo, setFoo] = useState();
useEffect(() => {
setFoo("bar");
}, []); // The eslint rule wants setFoo here despite the value being stable