The useEffect hook in React is a powerful tool for managing side effects in your functional components. A side effect is anything that interacts with something outside of the component’s normal rendering logic. Think of it as the component reaching out and touching the real world (or the browser environment).

What are Side Effects?

Common examples of side effects include:

• Data Fetching: Making API calls to get data from a server.  
• Subscriptions: Setting up event listeners (e.g., listening for window resize events).  
• Timers: Using setTimeout or setInterval.
• DOM Manipulation: Directly changing the DOM (although this is less common with React).
• Logging: Using console.log (although this is usually for development and not considered a core side effect).

Why useEffect?

The primary purpose of useEffect is to provide a place to put this side effect logic in your functional components. It ensures that these side effects are performed in a predictable way, at the right time in the component’s lifecycle.  

useEffect accepts two arguments:

1. A function (the effect): This function contains the code for your side effect. 
2. An optional dependency array: This array lists the values that the effect depends on.  

useEffect(effectFunction, [dependencies]);

Understanding the Dependency Array:

• No Dependency Array: If you don’t provide a dependency array, the effect runs after every render. This can be useful for things like logging or simple DOM manipulations, but often leads to unnecessary re-executions of the effect.  

• Empty Dependency Array []: If you provide an empty dependency array, the effect runs only once after the initial render (like componentDidMount in class components). This is useful for things like fetching data when the component first mounts.  

• Dependency Array with Values: If you provide a dependency array with values, the effect runs:

  • After the initial render.
  • Only when any of the values in the dependency array change.

This is the most common and powerful use case. It allows you to control when the side effect runs, preventing unnecessary executions and potential bugs.  

Example: Data Fetching

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [userId, setUserId] = useState(1); // Example dependency

  useEffect(() => {
    // This is the effect function (side effect logic)
    fetch(`https://jsonplaceholder.typicode.com/todos/${userId}`)
      .then(response => response.json())
      .then(json => setData(json));

    // This is the dependency array
  }, [userId]); // The effect runs when userId changes

  return (
    <div>
      <p>User ID: {userId}</p>
      <button onClick={() => setUserId(2)}>Change User ID</button>
      {data && (
        <div>
          <h2>Todo:</h2>
          <p>{data.title}</p>
        </div>
      )}
    </div>
  );
}

export default MyComponent;

In this example:

1. The useEffect hook is used to fetch data from an API.
2. The dependency array [userId] tells React that the effect depends on the userId state.
3. The effect will run:
   • Once after the component mounts (initial render).
   • Again only if the userId changes.

Cleanup Function (Important!):

useEffect can also return a cleanup function. This function is executed before the effect runs again (or when the component unmounts). This is crucial for preventing memory leaks and cleaning up resources (e.g., canceling subscriptions, clearing timers).

useEffect(() => {
  // Set up the side effect (e.g., event listener)

  const handleResize = () => {
    // ...
  };
  window.addEventListener('resize', handleResize);

  return () => { // Cleanup function
    // Clean up the side effect (e.g., remove event listener)
    window.removeEventListener('resize', handleResize);
  };
}, []); // Empty dependency array means this runs only once on mount and cleanup on unmount

Key Takeaways:

• useEffect manages side effects in functional components.
• Side effects are interactions with the outside world (data fetching, subscriptions, timers, etc.).  
• The dependency array controls when the effect runs
• The cleanup function prevents memory leaks and cleans up resources.  

useEffect is a fundamental hook in React, and understanding how it works is essential for building robust and efficient React applications. Mastering the dependency array and the cleanup function is particularly important.