Hacker News Reader

A recent thing which has been rubbing me the wrong way in React has been the exhaustive dependencies for useEffect and other hooks.

Sure, in the case someone would alter say the function provided as props it should be included in the dependency array. Yet in most cases, such as the example #3 in the article, this would not happen (or be even desired). Rather, if it did it would be a bug and an appropriate error would better.

So if you wanted to adhere to the strict CRA linter's exhaustive dependencies rule, you should add the fetchData function as a dependency. Or if you moved the whole function inside the useEffect, then the onSuccess. Which makes even less sense now that I've written it down.

View on HN

const fetchData = () => { setLoading(true); callApi() .then((fetchedData) => { setData(fetchedData); onSuccess(); }) .catch((err) => setError(err)) .finally(() => setLoading(false)); }; useEffect(() => { fetchData(); }, []);

useEffect(() => { setLoading(true); callApi() .then((fetchedData) => { setData(fetchedData); onSuccess(); }) .catch((err) => setError(err)) .finally(() => setLoading(false)); }, [onSuccess]);