CODEWITHSUNDEEP
reactjsreact-hooksuse-effect
Paul Razvan Berg
Paul Razvan Berg

Reputation: 21470

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

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.

Upvotes: 233

Views: 124421

Answers (6)

Bsher Rahmoun
Bsher Rahmoun

Reputation: 61

  • React will run the logic inside useEffect, which has an empty dependency array, only when the component is initially rendered.

  • React will run the logic inside useEffect, which has no dependency
    array when the component is initially rendered AND every time its
    props or state change.

  • React will run the logic inside useEffect, which has a dependency
    array with some items, when the component is initially rendered AND
    every time one of these items changes.

Upvotes: 1

Kenny Grant
Kenny Grant

Reputation: 9633

The latest docs have a good rundown on the differences:

https://react.dev/reference/react/useEffect#examples-dependencies

Passing an array

If you specify the dependencies, your Effect runs after the initial render and after re-renders with changed dependencies.

useEffect(() => {}, [a, b]);

Passing an empty array

If your Effect truly doesn’t use any reactive values, it will only run after the initial render (though twice in development). This now causes a linter warning.

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

Passing no array

If you pass no dependency array at all, your Effect runs after every single render (and re-render) of your component.

useEffect(() => {});

Upvotes: 3

K Shaikh
K Shaikh

Reputation: 401

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

Upvotes: 6

Ciocoiu Ionut Marius
Ciocoiu Ionut Marius

Reputation: 53

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

Upvotes: 1

Ankur Marwaha
Ankur Marwaha

Reputation: 1885

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)

Upvotes: 26

bamtheboozle
bamtheboozle

Reputation: 6436

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

Upvotes: 426

Related Questions