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

admin管理员组

文章数量:1402777

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

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

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Apr 11, 2022 at 6:33 Anteater333Anteater333 6777 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

In React, a ponent 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 ponent 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 ponent 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 ponent 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 ponent 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..

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

}

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

and

function myComponent() {
}

this is normal js function

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

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 ponent 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 ponent renders, React will rerender all children of that ponent. So rerenders can occur quite often.

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

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

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


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

本文标签：