I wonder about differences between using `useEffect()` with empty dependency array and not using `us-CodePudding

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 ...
}

CodePudding user response：

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..

CodePudding user response：

They will be executed every time at component re-render if you put them in function directly

CodePudding user response：

As you mentioned, when you have an empty dependency (like below), the code inside will only run on mount.

  useEffect(() => {
    something() // only runs on mount
  }, []);

If you don't have a useEffect at all, the code will be run every time the component rerenders.

function myComponent() {
  // some states, variables

  something() // runs on every rerender
  
  // return ...
}

Now the question is, "when does a rerender happen?". In general, anytime a parent component renders, React will rerender all children of that component. So rerenders can occur quite often.

Look at this article, which has some really helpful visual examples of when components rerender.

CodePudding user response：

function myComponent() {
   useEffect(() => {
   }, []);

}

here useEffect(()=>{},[]) works like componentDidMount

and

function myComponent() {
}

this is normal js function

CodePudding user response：

if the dependency array is empty you will only run the useEffect on mount. While not using useEffect, the code inside your component will run every time you rerender the page/component.

function myComponent(){
   console.log('render') // will run everytime you render
   return ()
}


function myComponent(){
  useEffect(() => {
    console.log('on mount'); // run on mount
  }, [])
  return ()
}