What's the use of useEffect hook in React?

In React, the useEffect hook is used to perform side effects in functional components. Side effects can include data fetching, subscriptions, manual DOM manipulations, and other operations that cannot be handled during the render phase.

The useEffect hook is called after the component has rendered, and it runs the specified function (the effect) that can contain code with side effects. Here’s a basic example to illustrate its usage:

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

function ExampleComponent() {
  // State to store data fetched from an API
  const [data, setData] = useState(null);

  // useEffect hook to fetch data when the component mounts
  useEffect(() => {
    const fetchData = async () => {
      try {
        // Simulating an API call
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Call the function to fetch data

    // Cleanup function (optional): will be called when the component unmounts
    return () => {
      // Perform cleanup, unsubscribe, etc.
    };
  }, []); // Empty dependency array means the effect runs only once after the initial render

  return (
    <div>
      {/* Render component using the fetched data */}
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default ExampleComponent;

In this example:

• The useEffect hook is used to fetch data from an API after the component has mounted.
• The function passed to useEffect is the effect itself.
• The empty dependency array ([]) means that the effect runs only once after the initial render. If you provide dependencies, the effect will run whenever those dependencies change.

Key points about useEffect:

1. Side Effects: It is primarily used for handling side effects in functional components, where side effects might include data fetching, subscriptions, or manual DOM manipulations.
2. Asynchronous Operations: You can perform asynchronous operations inside the useEffect function, such as fetching data using async/await.
3. Cleanup: If your effect involves any cleanup (e.g., clearing intervals, unsubscribing from subscriptions), you can return a cleanup function from the useEffect.
4. Dependency Array: By providing a dependency array, you can control when the effect runs. If the array is empty, the effect runs once after the initial render. If dependencies are specified, the effect runs whenever those dependencies change.

useEffect is a crucial tool for managing side effects in React functional components, contributing to better organization and lifecycle management.