Command Palette

Search for a command to run...

Hectal
Phase 14Advanced15 of 28 in React

Data Fetching and Async UI

Load server data the right way: avoid waterfalls, model loading and error states, use Suspense, use() and error boundaries, TanStack Query and race-free caching.

Almost every real app shows data that lives on a server: products, messages, a user's profile. Getting that data is asynchronous: you ask, you wait, and the answer may arrive late, arrive out of order, or fail. Topic 7.7 showed the basic recipe of fetching in an effect. This phase is the complete picture: where data loading should happen, how to design screens for every state of a request, and which React features and libraries make it reliable.

You'll compare the four ways React apps get data (effects, data libraries, route loaders and server components) and learn to spot request waterfalls. You'll design loading, error and empty states without layout jumps, then learn React's built-in async tools: Suspense boundaries, the React 19 **use() hook, and error boundaries**, including the React 19 root error callbacks.

Then you'll meet the tool most teams use for server data, TanStack Query (query keys, caching, staleTime vs gcTime, mutations and invalidation), and finish by building the core of such a library yourself: a tiny cache with request deduplication, stale-while-revalidate and protection against race conditions. Server Components and Next.js data fetching come in Phase 20.

0/7 · 0%
7 topics ~4 h 26 code blocks & diagrams
Start with the first topic
1
14.1

How React Apps Get Data

React apps load data in four main ways: in effects, through a data library, in route loaders, or in server components; the big difference between them is when a request starts, and starting late causes slow request waterfalls.

32 min 1 diagram 3 code practice

2
14.2

Loading, Error and Empty States

Every request can be loading, failed, empty or successful, so model it with one status value, design a screen for each state (skeletons, retry buttons, empty messages, optimistic hints), and keep the layout from jumping when data arrives.

33 min 3 code practice

3
14.3

Suspense

<Suspense fallback={...}> shows a fallback while anything inside it is still loading (lazy code, a promise read with use(), a Suspense-enabled library), lets you nest boundaries to control what appears together, and works with transitions to keep the old screen visible instead of flashing a spinner.

30 min 4 code practice

4
14.4

use(): Reading Promises and Context

use(resource) reads the value of a promise (suspending until it settles) or of a context; unlike other hooks it may be called inside if blocks and after early returns, but the promise must be created outside render or cached, never made fresh on every render.

30 min 3 code practice

5
14.5

Error Boundaries

An error boundary is a class component with static getDerivedStateFromError (show a fallback) and componentDidCatch (log), that catches errors thrown while rendering its children; it doesn't catch errors in event handlers or async code, it's reset with a key or a reset function, and React 19 adds root-level onCaughtError, onUncaughtError and onRecoverableError callbacks.

33 min 5 code practice

6
14.6

Server State with TanStack Query

TanStack Query keeps server data in a shared cache identified by query keys: useQuery reads it (with isPending, isFetching and error), staleTime decides when data needs refreshing and gcTime when unused data is deleted, and useMutation plus invalidateQueries change data on the server and refresh every screen that shows it.

34 min 4 code practice

7
14.7

Race Conditions, Deduplication and Caching

Responses can arrive out of order, so ignore or abort stale requests; share one request between components that need the same data (deduplication); and show cached data at once while refreshing it in the background (stale-while-revalidate). Building a tiny cache shows how data libraries work inside.

33 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Load a user in an effect

fakeFetchUser(7) returns a promise of { id: 7, name: "Asha" } after 500 ms. Load it when Profile appears, using useState and useEffect.

Beginner
2

One status value, an error and a retry

fetchWeather() fails the first time with Network error and succeeds after that, resolving { city: "Pune", temp: 31 } after 400 ms.

Intermediate
3

Read a promise with use() and Suspense

fetchQuote() logs fetching quote and resolves to a quote string after 500 ms.

Advanced
4

An error boundary with Try again

Complete the ErrorBoundary class: use static getDerivedStateFromError to store the error, and when there is one render <div role="alert"> with the error message and a button id="try-again".

Advanced
5

A search box without race conditions

fakeSearch(query) answers one-letter queries slowly (900 ms) and longer ones fast (300 ms), so answers can arrive out of order.

Advanced
6

Todos with TanStack Query

The starter already lists todos with useQuery (key ["todos"]). Add a todo form: an input id="new-todo" and a button id="add".

Advanced