React Hooks: useEffect

The useEffect hook allows you to perform side effects in function components. It serves various use cases like data fetching, subscriptions, or manually changing the DOM.

2.1 What is a Side Effect?

A side effect is any operation that interacts with the outside world from your component, such as data fetching or subscriptions.

2.2 How useEffect Works

The useEffect hook runs after the render is committed to the screen.

3.1 Basic Syntax

import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        // Your code here
        return () => {
            // Cleanup code here
        };
    }, [/* dependencies */]);

    return 
My Component
;
};

3.2 Example: Fetching Data

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

const DataFetchingComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));

        return () => {
            // Cleanup if necessary
        };
    }, []);

    return (
        

            {data.map(item => (
                
{item.name}
            ))}
        
    );
};

• Always provide a cleanup function if you're subscribing to an event or a data stream.
• Use the dependency array wisely to optimize performance.
• Avoid using state variables directly in the dependency array unless necessary.
• Group multiple useEffect calls if they are related.