React

1. The 3-State Data Fetching Pattern

Every asynchronous operation in modern React web applications revolves around 3 fundamental states: Loading ($\rightarrow$ Spinner), Error ($\rightarrow$ Alert), and Success ($\rightarrow$ Data UI).

Production Data Fetching Implementation

function UserDirectory() {
    const [users, setUsers] = React.useState([]);
    const [isLoading, setIsLoading] = React.useState(true);
    const [error, setError] = React.useState(null);

    React.useEffect(() => {
        let isCancelled = false; // Guard against setting state if unmounted

        async function fetchUsers() {
            try {
                setIsLoading(true);
                setError(null);

                const response = await fetch("https://jsonplaceholder.typicode.com/users");
                if (!response.ok) {
                    throw new Error(`HTTP Error! Status: ${response.status}`);
                }
                const data = await response.json();
                
                if (!isCancelled) {
                    setUsers(data);
                }
            } catch (err) {
                if (!isCancelled) {
                    setError(err.message || "Failed to load directory.");
                }
            } finally {
                if (!isCancelled) {
                    setIsLoading(false);
                }
            }
        }

        fetchUsers();

        return () => {
            isCancelled = true; // Cleanup flag
        };
    }, []); // Runs once on mount

    if (isLoading) return <div className="loading-spinner">Loading Users...</div>;
    if (error) return <div className="error-banner">⚠️ {error}</div>;

    return (
        <ul className="users-list">
            {users.map(u => (
                <li key={u.id}>{u.name} — <small>{u.email}</small></li>
            ))}
        </ul>
    );
}

2. Handling Race Conditions with AbortController

A Race Condition happens when a user rapidly changes search filters (e.g. searching "A" then "AB"). The network request for "A" might finish after "AB", overwriting the fresh results with stale data!

useEffect(() => {
    const controller = new AbortController(); // 1. Create controller

    async function searchAPI() {
        try {
            const res = await fetch(`/api/search?q=${query}`, {
                signal: controller.signal // 2. Attach signal to fetch
            });
            const results = await res.json();
            setData(results);
        } catch (err) {
            if (err.name !== "AbortError") {
                setError(err.message); // Ignore intentional abort cancellations!
            }
        }
    }

    if (query) searchAPI();

    return () => {
        controller.abort(); // 3. Cancel network request if query changes!
    };
}, [query]);

3. Hands-On Practice Challenges

Master async data transformations, HTTP status parsing, and optimistic updates. Click "Solve Challenge" to open the code editor!