Dependency list in the useEffect hook
Tags: webdev, javascript, beginners, react
Published: 2023-07-21 06:13:07

The dependency list in the `useEffect` hook is an optional second argument that determines when the effect function should run. It is an array of dependencies, and the effect function will run if any of the dependencies in the list have changed since the last render. If the dependency list is empty (`[]`), the effect will run only once after the initial render, simulating the behavior of `componentDidMount`.

Now, let's explain the differences between the three code examples and their behavior and working process:

1. Code Example 1:
```jsx
import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("useEffect call", count);
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, [count]);

  return (
    <div className="App">
      <h1>I have rendered {count} times!</h1>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
```

Code Example 1 uses `[count]` as the dependency array. This means the effect function inside the `useEffect` hook will run whenever the `count` state changes. The `useEffect` is set to run after each render, and since it modifies the `count` state using `setCount`, it causes the component to re-render. As a result, the effect will run repeatedly, creating an infinite loop that increments the `count` state every second.

2. Code Example 2:
```jsx
import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("useEffect call", count);
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);

  return (
    <div className="App">
      <h1>I have rendered {count} times!</h1>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
```

Code Example 2 uses an empty dependency array `[]`. This means the effect function inside the `useEffect` hook will run only once after the initial render, simulating the behavior of `componentDidMount`. The `useEffect` runs only once, setting up the `setTimeout` to increment the `count` state after one second. Since there are no dependencies in the array, the effect doesn't depend on any state or props changes, and it will not run again after the initial render.

3. Code Example 3:
```jsx
import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("useEffect call", count);
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return (
    <div className="App">
      <h1>I have rendered {count} times!</h1>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
```

Code Example 3 doesn't have a dependency array, which means the effect function inside the `useEffect` hook will run after each render. Since there is no dependency list, the effect is dependent on all state and props in the component. The `useEffect` runs after the initial render and sets up the `setTimeout` to increment the `count` state after one second. However, because the effect runs after each render, it creates an infinite loop that increments the `count` state every second.

In summary:
- Code Example 1 creates an infinite loop due to the dependency on `count`, resulting in repeated renders and updates to the `count` state.
- Code Example 2 increments the `count` state only once after the initial render since there are no dependencies in the dependency array.
- Code Example 3 also creates an infinite loop because there is no dependency array, causing the component to re-render repeatedly and continuously incrementing the `count` state.