What are some examples of using useEffect in React?

What are some examples of using useEffect in React?

The useEffect hook in React is used for managing side effects in functional components. Here are a few examples:

1. Fetching data from an API when the component mounts.
2. Setting up a subscription to a data source.
3. Updating the document title based on state changes.

Can you show me a code example for fetching data?

Sure! Here's a simple example:

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

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

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => {
                setData(data);
                setLoading(false);
            });
    }, []); // Empty dependency array means this runs once on mount

    if (loading) return <div>Loading...</div>;
    return <div>{JSON.stringify(data)}</div>;
};

What about cleaning up subscriptions?

Great question! You can clean up subscriptions in the return function of useEffect. Here's an example:

useEffect(() => {
    const subscription = someDataSource.subscribe();
    return () => {
        subscription.unsubscribe();
    };
}, []);