in what case I shouldn't put the empty array [] as dependcies in react useEffect? like
React.useEffect(() => {
if (true) {
doStuff()
}
return () => null;
});
Is above code even valid?
-
It's valid. It means the effect runs every time the component re-rendersJayce444– Jayce4442020-12-04 01:01:00 +00:00Commented Dec 4, 2020 at 1:01
Add a comment
|
2 Answers
just remember 3 rules:
useEffect(()=>{},[]) //this is like componentDidMount
useEffect(()=>{}) //this will run every render
useEffect(()=>{},[dep1, dep2]) //this will run if one on de dependency change
Comments
Your code is valid.
undefined is passed as dependencies and it means useEffect runs on every render. So if you want to do some work that shouldn't be run on every render (like adding event listener), you should give a dependency array.
4 Comments
Nadiely Jade
in what case we put it as undefined?
michael
if you don't give anything (even empty array) as dependency,
undefined will be passed.Nadiely Jade
yeah you already said that, in what case you that?
michael
You can pass nothing If you want to do something every single time the component is updated. But more often than not, you likely only want this effect to happen because of something else. Perhaps you want to do something only when data changes, or maybe when the user first sees the component.