In useEffect, what's the difference between providing no dependency array and an empty one?

reactjs react-hooks use-effect
Paul Razvan Berg picture Paul Razvan Berg · Oct 27, 2019 · Viewed 8k times · Source

I gather that the 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.

Answer

bamtheboozle picture bamtheboozle · Oct 27, 2019

It's not quite the same.

  • 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

Related questions

Why is the cleanup function from `useEffect` called on every render?

I've been learning React and I read that the function returned from useEffect is meant to do cleanup and React performs the cleanup when the component unmounts. So I experimented with it a bit but found in the following example …

Read More
What does it mean to 'move this variable directly inside useEffect' in this error message?

I am attempting to pass an object through props to a child component. The value is set in the useEffect hook and lost when passed to my child component. I have tried setting the value of the object outside the …

Read More
React Hook "useState" is called in function "setResults" which is neither a React function component or a custom React Hook function

I am trying to make an API call in a functional component which is a react-hook and based on the result, re-render the component's content. Here is the code: Component which is calling the API- function IntegrationDownshift() { render( <Paper …

Read More