198

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.

Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114

4 Answers4

375

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

bamtheboozle
  • 5,847
  • 2
  • 17
  • 31
  • 3
    Is there a use-case for ever putting `null`? Isn't it just the same as not putting the code in a useEffect hook? – Patrick Mar 05 '21 at 17:07
  • 4
    @Patrick `useEffect` will be run __after render__ while just putting the code there will be run __before render__ – Rakha Kanz Kautsar Mar 17 '21 at 02:47
  • according to a note in: https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect, passing empty array will cause run it also on `componentWillUnmount` in addition to `componentDidMount` – Reza NA Oct 17 '21 at 19:53
  • When I give the dependency array a variable (Ex: [myList]) to display my list items after I insert them with `axios.post` and I see that it keeps sending requests every second in my Network tab. Will this affect the performance of my app? – KYin Jan 15 '22 at 05:04
  • well, yes. you're basically running an infinite loop – bamtheboozle Jan 16 '22 at 16:12
  • @Patrick Putting dependency as null is same as having empty array. It will on render content inside useEffect once. – Niraj Sep 28 '22 at 02:04
  • Is there an official name for the empty array pattern? So far I only see this circumscribed and it's hard to google for questions I have that are related to this pattern. – martinoss Dec 29 '22 at 09:42
24

Just an addition to @bamtheboozle's answer.

If you return a clean up function from your useEffect

useEffect(() => {
  performSideEffect();
  return cleanUpFunction;
}, []);

It will run before every useEffect code run, to clean up for the previous useEffect run. (Except the very first useEffect run)

Ankur Marwaha
  • 1,613
  • 2
  • 15
  • 30
  • 4
    You forgot to mention that the cleanup function will also always run on unmount. So, for example, if the dependency array is empty (`[]`), then the cleanup function will only run once: on unmount. See "Notes" section [here](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) (scroll down). – jaquinocode Sep 01 '21 at 00:56
3

Late to the party but thought of putting this example here which I did for my own understanding after reading above comments:

import './App.css';
import { useEffect, useState } from 'react';

function App() {

  const [name, setName] = useState('John');
   useEffect(()=>{
    console.log("1- No dependency array at all");
  });
  useEffect(()=>{
    console.log("2- Empty dependency array");
  }, []);
  useEffect(()=>{
    console.log("3- Dependency array with state");
  }, [name]);

  const clickHandler = () => {
    setName('Jane');
  }
  return (
    <div className="App">
      <button onClick={clickHandler}>Click to update state</button>
      <p>{`Name: ${name}`}</p>
    </div>
  );
}

export default App;

OUTPUT

On page load

 1- No dependency array at all
 2- Empty dependency array
 3- Dependency array with state
 1- No dependency array at all
 2- Empty dependency array
 3- Dependency array with state

On button click -state update

 1- No dependency array at all
 3- Dependency array with state
K. Shaikh
  • 301
  • 4
  • 12
  • Everywhere I see says that an empty array will run only once. I'm trying to use this to bind an event handler. but with empty array it don't run at all. – Elias Soares Jan 29 '23 at 23:44
1

The difference is that if you don't provide the empty array dependency, the useEffect() hook will be executed on both mount and update.

Ciocoiu Ionut Marius
  • 55
  • 2