I know useEffect() with no array run the callback only at the first render.
Then what is the differences between useEffect(()=>{},[]) and no useEffect().
I mean between this:
function myComponent() {
// some states, variables
useEffect(() => {
// do something on mount <= this is my current concern.
}, [/* empty */]);
// return Element ...
}
and this:
function myComponent() {
// some states, variables
// do something on mount <= this is my current concern.
// return Element ...
}
>Solution :
In React, a component re-renders whenever there is a change in it’s state or one of it’s props.
The reason it behaves like this is so that it would be possible to "react" to a change in the mentioned data, and to reflect UI changes accordingly.
Every time the component re-renders, so does any logic within it that is not cached (functions, variables, etc..)
useEffect helps us with reacting to a change in the state or props that are stated in it’s dependency array.
It gives us to option to automatically run a callback function in such an event/s.
useEffect with an empty dependency array, will run only a single time when the component is mounted.
So in this example –
function myComponent() {
// some states, variables
useEffect(() => {
// do something on mount <= this is my current concern.
}, [/* empty */]);
// return Element ...
}
The callback function inside the useEffect will run only once, when the component is first "brought to life".
Subsequent renders will not invoke this.
While in this example –
function myComponent() {
// some states, variables
// do something on mount <= this is my current concern.
// return Element ...
}
Whatever you put in there will run every time the component re-renders.
Whether this is ok or not depends on your use-case and what function are you trying to run, if it’s "cheap" to run or not, etc..