UseEffect Without Dependency Array: Behavior and Examples in React

In React, using useEffect without a dependency array runs the effect after every render of the component. This means the effect runs on the initial mount and on every update, which can cause performance issues if not handled carefully.

Syntax

The useEffect hook takes two arguments: a function to run as the effect, and an optional dependency array. When the dependency array is omitted, the effect runs after every render.

• useEffect(() => { ... }): Effect runs after every render.
• useEffect(() => { ... }, []): Effect runs only once after the first render.
• useEffect(() => { ... }, [dep1, dep2]): Effect runs when dependencies change.

javascript

useEffect(() => {
  // Your effect code here
});

Example

This example shows a counter component where useEffect without a dependency array logs a message after every render, including the initial mount and every update.

javascript

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs after every render. Current count:', count);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Output

When the component mounts, console logs: "Effect runs after every render. Current count: 0". Each time the button is clicked, the count updates and the console logs the updated count.

Common Pitfalls

Using useEffect without a dependency array can cause the effect to run too often, leading to performance problems or infinite loops if the effect updates state that triggers a re-render.

For example, updating state inside such an effect without conditions causes continuous re-renders.

javascript

import React, { useState, useEffect } from 'react';

function WrongExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This causes an infinite loop because setCount triggers a re-render
    setCount(count + 1);
  });

  return <p>Count: {count}</p>;
}

// Correct way: add dependency array or condition

function RightExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count < 5) {
      setCount(count + 1);
    }
  }, [count]);

  return <p>Count: {count}</p>;
}

Quick Reference

• No dependency array: Effect runs after every render.
• Empty array: Effect runs once after mount.
• With dependencies: Effect runs when dependencies change.
• Be careful: Avoid infinite loops by not updating state unconditionally inside effects without dependencies.

Key Takeaways

useEffect without a dependency array runs after every render, including updates.

This behavior can cause performance issues or infinite loops if state updates happen inside the effect without conditions.

Always consider adding a dependency array to control when the effect runs.

Use an empty dependency array to run the effect only once after the component mounts.

Check your effect logic to avoid unintended repeated executions.