Dependency list in the useEffect hook

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:

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.

1. Code Example 2:

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.

1. Code Example 3:

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.