Waiting for async function in React component Showing Spinner

React

async function

spinner

loading indicator

React component

Waiting for async function in React component Showing Spinner

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Concurrency JavaScript & Web

Introduction

In React, async operations like API calls do not block rendering. To show a loading spinner while waiting for data, you use a state variable (typically loading) that starts as true, triggers the spinner, and is set to false when the async operation completes. The standard pattern is to call the async function inside useEffect, update state with useState, and conditionally render a spinner or the data based on the loading state. This pattern applies to any async operation — API fetches, file reads, or computations.

Basic Loading Spinner Pattern

jsx

1import { useState, useEffect } from 'react';
2
3function UserProfile({ userId }) {
4    const [user, setUser] = useState(null);
5    const [loading, setLoading] = useState(true);
6    const [error, setError] = useState(null);
7
8    useEffect(() => {
9        async function fetchUser() {
10            try {
11                setLoading(true);
12                const response = await fetch(`/api/users/${userId}`);
13                if (!response.ok) throw new Error('Failed to fetch');
14                const data = await response.json();
15                setUser(data);
16            } catch (err) {
17                setError(err.message);
18            } finally {
19                setLoading(false);
20            }
21        }
22
23        fetchUser();
24    }, [userId]);
25
26    if (loading) return <div className="spinner" />;
27    if (error) return <div>Error: {error}</div>;
28    return <div>{user.name}</div>;
29}

The loading state controls which UI is rendered. The finally block ensures setLoading(false) runs whether the fetch succeeds or fails.

Spinner Component

jsx

1function Spinner({ size = 40, color = '#3b82f6' }) {
2    return (
3        <div
4            style={{
5                width: size,
6                height: size,
7                border: `4px solid #e5e7eb`,
8                borderTop: `4px solid ${color}`,
9                borderRadius: '50%',
10                animation: 'spin 0.8s linear infinite',
11            }}
12        />
13    );
14}
15
16// Add CSS animation
17// @keyframes spin { to { transform: rotate(360deg); } }
18
19function DataList() {
20    const [items, setItems] = useState([]);
21    const [loading, setLoading] = useState(true);
22
23    useEffect(() => {
24        fetch('/api/items')
25            .then(res => res.json())
26            .then(data => setItems(data))
27            .finally(() => setLoading(false));
28    }, []);
29
30    return (
31        <div>
32            <h2>Items</h2>
33            {loading ? (
34                <Spinner size={32} />
35            ) : (
36                <ul>
37                    {items.map(item => <li key={item.id}>{item.name}</li>)}
38                </ul>
39            )}
40        </div>
41    );
42}

Custom Hook for Loading State

jsx

1function useAsync(asyncFn, deps = []) {
2    const [data, setData] = useState(null);
3    const [loading, setLoading] = useState(true);
4    const [error, setError] = useState(null);
5
6    useEffect(() => {
7        let cancelled = false;
8
9        setLoading(true);
10        setError(null);
11
12        asyncFn()
13            .then(result => {
14                if (!cancelled) setData(result);
15            })
16            .catch(err => {
17                if (!cancelled) setError(err);
18            })
19            .finally(() => {
20                if (!cancelled) setLoading(false);
21            });
22
23        return () => { cancelled = true; };
24    }, deps);
25
26    return { data, loading, error };
27}
28
29// Usage
30function ProductPage({ productId }) {
31    const { data: product, loading, error } = useAsync(
32        () => fetch(`/api/products/${productId}`).then(r => r.json()),
33        [productId]
34    );
35
36    if (loading) return <Spinner />;
37    if (error) return <div>Error: {error.message}</div>;
38    return <div>{product.name} - ${product.price}</div>;
39}

The custom hook encapsulates the loading/error/data pattern and includes a cleanup flag to prevent state updates on unmounted components.

Multiple Async Operations

jsx

1function Dashboard() {
2    const [loading, setLoading] = useState(true);
3    const [data, setData] = useState({});
4
5    useEffect(() => {
6        async function loadDashboard() {
7            try {
8                const [users, orders, stats] = await Promise.all([
9                    fetch('/api/users').then(r => r.json()),
10                    fetch('/api/orders').then(r => r.json()),
11                    fetch('/api/stats').then(r => r.json()),
12                ]);
13                setData({ users, orders, stats });
14            } catch (err) {
15                console.error('Dashboard load failed:', err);
16            } finally {
17                setLoading(false);
18            }
19        }
20
21        loadDashboard();
22    }, []);
23
24    if (loading) return <Spinner />;
25
26    return (
27        <div>
28            <UserList users={data.users} />
29            <OrderTable orders={data.orders} />
30            <StatsPanel stats={data.stats} />
31        </div>
32    );
33}

Promise.all fetches all data in parallel. The spinner shows until every request completes.

Skeleton Loading Pattern

jsx

1function UserCard({ userId }) {
2    const [user, setUser] = useState(null);
3    const [loading, setLoading] = useState(true);
4
5    useEffect(() => {
6        fetch(`/api/users/${userId}`)
7            .then(r => r.json())
8            .then(setUser)
9            .finally(() => setLoading(false));
10    }, [userId]);
11
12    if (loading) {
13        return (
14            <div className="user-card">
15                <div className="skeleton skeleton-avatar" />
16                <div className="skeleton skeleton-text" />
17                <div className="skeleton skeleton-text short" />
18            </div>
19        );
20    }
21
22    return (
23        <div className="user-card">
24            <img src={user.avatar} alt={user.name} />
25            <h3>{user.name}</h3>
26            <p>{user.email}</p>
27        </div>
28    );
29}

Skeleton screens show placeholder shapes that match the final layout, giving users a sense of structure before data loads. This feels faster than a generic spinner.

Common Pitfalls

Defining async functions directly in useEffect: useEffect(async () => { ... }) returns a promise, but React expects useEffect to return a cleanup function or nothing. Define the async function inside and call it: useEffect(() => { async function load() { ... } load(); }, []).
Not handling component unmount: If the component unmounts before the fetch completes, calling setState triggers a warning. Use a cancelled flag in the cleanup function: return () => { cancelled = true; } and check it before calling setState.
Forgetting the loading state on re-fetch: When dependencies change (e.g., userId), the component re-fetches data. If you do not reset loading to true at the start, stale data shows briefly before the new data loads. Always setLoading(true) before starting a new fetch.
Not showing errors alongside loading: If a fetch fails, loading becomes false but data remains null. Without an error state, the component renders with no data and no explanation. Always track errors alongside loading state.
Blocking render with synchronous operations: Heavy computations in the render path freeze the UI even with a spinner. Move expensive work into useEffect or a Web Worker so the spinner can actually animate while the work happens in the background.

Summary

Use useState for loading, data, and error to track async operation state
Call async functions inside useEffect, not directly as the effect callback
Render a spinner or skeleton when loading is true, the actual content when false
Use Promise.all for parallel fetches with a single loading indicator
Clean up with a cancelled flag to prevent state updates on unmounted components

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Waiting for async function in React component Showing Spinner

Interview Questions practice on Codemia

Introduction

Basic Loading Spinner Pattern

Spinner Component

Custom Hook for Loading State

Multiple Async Operations

Skeleton Loading Pattern

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

Track what you have practised

Interview Questions practice on Codemia