Side Effects, Data Fetching & useEffect Hook

Side Effects with useEffect

import { useState, useEffect } from 'react';

export function TutorialsList() {
    const [tutorials, setTutorials] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        let isMounted = true;
        fetch('/api/tutorials')
            .then(res => res.json())
            .then(data => {
                if (isMounted) {
                    setTutorials(data);
                    setLoading(false);
                }
            });

        return () => { isMounted = false; }; // Cleanup on unmount
    }, []); // Empty deps runs once on mount

    if (loading) return <p>Loading tutorials...</p>;
    return <ul>{tutorials.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}