gotchareactCritical
In useEffect, what's the difference between providing no dependency array and an empty one?
Viewed 0 times
whatonetheandprovidingdifferencedependencyemptyuseeffectarray
Problem
I gather that the
But what's the difference between that, and the following?
Notice the lack of
useEffect Hook is run after every render, if provided with an empty dependency array:useEffect(() => {
performSideEffect();
}, []);
But what's the difference between that, and the following?
useEffect(() => {
performSideEffect();
});
Notice the lack of
[] at the end. The linter plugin doesn't throw a warning.Solution
It's not quite the same.
-
Giving it an empty array acts like
-
Giving it no second argument acts as both
-
Giving it an array as second argument with any value inside, eg
You can read more about the second argument as well as more on how hooks actually work on the official docs at https://reactjs.org/docs/hooks-effect.html
-
Giving it an empty array acts like
componentDidMount as in, it only runs once.-
Giving it no second argument acts as both
componentDidMount and componentDidUpdate, as in it runs first on mount and then on every re-render.-
Giving it an array as second argument with any value inside, eg
, [variable1] will only execute the code inside your useEffect hook ONCE on mount, as well as whenever that particular variable (variable1) changes.You can read more about the second argument as well as more on how hooks actually work on the official docs at https://reactjs.org/docs/hooks-effect.html
Context
Stack Overflow Q#58579426, score: 432
Revisions (0)
No revisions yet.