How to Improve Data Loading With React Router Defer

Modern single-page applications (SPAs) often require fast, responsive navigation. One challenge developers face is waiting for all data to load before rendering a route. This can lead to a blank screen or a sluggish user experience. React Router’s defer function addresses this problem by allowing parts of your data to load asynchronously—even after the UI is rendered.

In this article, we’ll explore the defer function, how deferred data loading works, and when and how to implement it in your React application.

---

The Challenge of Data Loading in SPAs

Traditionally, React Router’s route loaders wait for all asynchronous data (via promises) to resolve before the component is rendered. For example, if you have a route that must fetch critical and non-critical data, your route won’t render until every promise resolves. This “waterfall” loading can delay the initial render, even if some data isn’t immediately necessary for the first paint.

“With traditional loaders, the entire route is blocked until every promise resolves. This can lead to a slower perceived performance if one or more requests are delayed.”

---

What is the defer Function?

React Router’s defer function changes the paradigm by allowing you to return promises directly from your loader. Instead of waiting for every piece of data to load, you can “defer” non-critical data so that the route’s component renders immediately with placeholders (using React’s Suspense). When the deferred promises resolve, the UI updates automatically.

Key Points:

• Immediate Render: Critical data (or data awaited inside the loader) renders immediately.
• Deferred Promises: Non-critical data is returned as unresolved promises. The UI can display a fallback (or skeleton) until these promises settle.
• Improved UX: Users see an immediate layout with loading indicators for data that is still fetching.

For example, consider a loader that fetches product details (critical) and product reviews (non-critical). With defer, you can immediately display the product details and render a “Loading…” message for the reviews.

---

How Does Deferred Data Loading Work?

When you use defer in your loader, you effectively tell React Router to separate the data-fetching responsibilities:

• Critical Data: Use await to resolve the promise before returning. This ensures that essential UI elements are ready.
• Non-Critical Data: Return the promise directly without awaiting it. This promise is “deferred” and will resolve in the background.

Basic Example

1import {
2  defer,
3  useLoaderData,
4  Await,
5} from "react-router-dom";
6import React from "react";
7import { getProduct, getProductReviews } from "./api";
8
9export async function loader({ params }) {
10  // Await critical data immediately:
11  const product = await getProduct(params.productId);
12  // Return non-critical data as a promise (deferred):
13  const reviewsPromise = getProductReviews(params.productId);
14
15  return defer({ product, reviews: reviewsPromise });
16}
17
18export default function ProductPage() {
19  const { product, reviews } = useLoaderData();
20
21  return (
22    <main>
23      <h1>{product.name}</h1>
24      <p>{product.description}</p>
25
26      <React.Suspense fallback={<p>Loading reviews…</p>}>
27        <Await resolve={reviews}>
28          {(reviewsData) => (
29            <ul>
30              {reviewsData.map((review) => (
31                <li key={review.id}>{review.comment}</li>
32              ))}
33            </ul>
34          )}
35        </Await>
36      </React.Suspense>
37    </main>
38  );
39}

Explanation:

• Critical Data: The product is awaited in the loader so that when the component renders, it immediately has the necessary details.
• Deferred Data: The reviews are returned as a promise. The <Await> component (wrapped in <React.Suspense>) suspends rendering of that part of the UI until the promise resolves. This ensures the page loads quickly while showing a fallback until the reviews are available.

---

Visualizing the Flow with a Mermaid Diagram

The diagram below provides a visual overview of the data loading flow when using defer:

Diagram Explanation:

• Route Loader Called (A): When the route is entered, the loader function is triggered.
• Critical Data (B): Critical data is fetched using await, ensuring it’s ready before rendering.
• Non-Critical Data (C): Non-critical data is fetched and returned as an unresolved promise.
• Return Object (D): The loader returns an object containing both the resolved critical data and the deferred promise.
• Immediate Render (E): The component renders immediately using the available critical data.
• Display Critical Data (F): Critical data is displayed without delay.
• Boundary (G): A <Suspense> component wraps the non-critical part, showing a fallback UI while waiting.
• Component (H): The <Await> component suspends rendering for non-critical data until its promise resolves.
• Data Resolution (I): Once the non-critical data promise resolves, the component can update.
• Final Render (J): The UI is updated with non-critical data once available.

---

When Should You Use defer?

Use Cases:

• Slow API Calls: When non-critical data (like user comments, reviews, or supplementary info) is fetched from a slow API.
• Large Data Sets: If fetching a large list or heavy resource is delaying your UI.
• Enhanced User Experience: When you want to show immediate feedback (e.g., skeleton screens or loading spinners) while background data loads.

Considerations:

• Trade-offs: Although deferred data improves initial render times, consider the user’s overall experience. Too many deferred elements might lead to a “popcorn UI,” where parts of the interface update abruptly.
• Error Handling: Be sure to provide fallback UI and error elements within <Await> to gracefully handle any rejected promises.
• Version Differences: In React Router v7, the usage of defer has been further streamlined. For example, some wrappers have been removed to simplify the API.

“Deferred data loading is all about making the app feel faster by not blocking the entire UI on data that isn’t immediately necessary.”

---

Best Practices and Tips

1. Prioritize Critical Data: Always await data that’s necessary for the initial render. Only defer data that can safely load in the background.
2. Use Suspense Thoughtfully: Wrap deferred content in <React.Suspense> with meaningful fallback content. This fallback should inform the user that more data is loading.
3. Error Boundaries: Implement error boundaries to catch rejected promises in your <Await> components.
4. Testing: Test both fast and slow network scenarios to ensure your deferred UI updates smoothly.
5. Documentation Review: Keep an eye on the official React Router guides and changelogs, as deferred data patterns may evolve with new versions (for example, React Router 7 has simplified some aspects of defer).

---

The Bottom Line!

The defer function in React Router is a powerful tool for improving the performance and user experience of your applications. By returning unresolved promises from your loaders, you enable immediate rendering of critical UI elements while non-critical data loads in the background. This approach not only speeds up the initial page load but also provides a smoother, more responsive user experience.

By following best practices and staying updated with the latest documentation, you can seamlessly integrate deferred data loading into your React projects and build faster, more dynamic applications.

Happy coding!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.