A good data-fetching UI should represent more than just the final data. Users need to understand what is happening while a request is running and what happened if it failed or returned nothing. A request commonly has states such as: ```text Idle Loading Success Empty Error ``` ### Basic Example ```jsx import { useEffect, useState } from "react"; function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function loadUsers() { try { setLoading(true); setError(null); const response = await fetch("/api/users"); if (!response.ok) { throw new Error("Unable to load users"); } const data = await response.json(); setUsers(data); } catch (error) { setError(error.message); } finally { setLoading(false); } } loadUsers(); }, []); if (loading) { return

Loading users...

; } if (error) { return

{error}

; } if (users.length === 0) { return

No users found.

; } return (

{user.name}

); } ``` ### Why Separate Loading from Empty? Suppose: ```javascript users = [] ``` That might mean: ```text Request has not finished yet ``` or: ```text Request succeeded but there are no users ``` Those are different situations. A loading flag makes the distinction clear. ### Why Separate Error State? Without error handling, a failed API request may leave the user looking at an endless spinner or blank page. Better UI communicates the failure: ```jsx if (error) { return (

We could not load the users.

); } ``` ### Loading vs Refetching As applications become more sophisticated, there is another useful distinction. Suppose cached data is already visible and the application requests a newer version. Instead of replacing the entire page with: ```text Loading... ``` you may keep the existing data visible while showing a smaller refreshing indicator. Conceptually: ```text Initial load → no data yet → full loading state Background refetch → old/cached data exists → keep showing data + refreshing state ``` Data-fetching libraries commonly make these distinctions easier to manage. ### Avoid Impossible State Combinations If several booleans are manually maintained: ```javascript loading = true success = true error = true ``` it becomes possible to accidentally create contradictory states. For more complicated workflows, a single status value can be clearer: ```javascript const [status, setStatus] = useState("idle"); ``` Possible values: ```text idle loading success error ``` ### Interview-Ready Answer A [React](/courses/reactjs) data-fetching UI should distinguish loading, successful, empty, and failed requests. Loading indicates that data is still being requested, an empty state means the request succeeded but returned no usable records, and error state communicates failures. Larger applications may also distinguish an initial load from a background refetch so existing cached data can remain visible.