Data Fetching Patterns in Single-Page Applications

Implementing Asynchronous State Handler in React with hooks

The pattern can be implemented in different frontend libraries. For instance, we could distill this approach into a custom Hook in a React application for the Profile component:

import { useEffect, useState } from "react";
import { get } from "../utils.ts";

const useUser = (id: string) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | undefined>();
  const [user, setUser] = useState<User | undefined>();

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const data = await get<User>(`/users/${id}`);
        setUser(data);
      } catch (e) {
        setError(e as Error);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [id]);

  return {
    loading,
    error,
    user,
  };
};

Please note that in the custom Hook, we don't have any JSX code - meaning it's totally UI free but sharable stateful logic. And the useUser launch data automatically when called. Within the Profile component, leveraging the useUser Hook simplifies its logic:

import { useUser } from './useUser.ts';
import UserBrief from './UserBrief.tsx';

const Profile = ({ id }: { id: string }) => {
  const { loading, error, user } = useUser(id);

  if (loading || !user) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Something went wrong...</div>;
  }

  return (
    <>
      {user && <UserBrief user={user} />}
    </>
  );
};

Generalizing Parameter Usage

In most applications, fetching different types of data—from user details on a homepage to product lists in search results and recommendations beneath them—is a common requirement. Writing separate fetch functions for each type of data can be tedious and difficult to maintain. A better approach is to abstract this functionality into a generic, reusable hook that can handle various data types efficiently.

Consider treating remote API endpoints as services, and use a generic useService hook that accepts a URL as a parameter while managing all the metadata associated with an asynchronous request:

import { get } from "../utils.ts";

function useService<T>(url: string) {
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | undefined>();
  const [data, setData] = useState<T | undefined>();

  const fetch = async () => {
    try {
      setLoading(true);
      const data = await get<T>(url);
      setData(data);
    } catch (e) {
      setError(e as Error);
    } finally {
      setLoading(false);
    }
  };

  return {
    loading,
    error,
    data,
    fetch,
  };
}

This hook abstracts the data fetching process, making it easier to integrate into any component that needs to retrieve data from a remote source. It also centralizes common error handling scenarios, such as treating specific errors differently:

import { useService } from './useService.ts';

const {
  loading,
  error,
  data: user,
  fetch: fetchUser,
} = useService(`/users/${id}`);

By using useService, we can simplify how components fetch and handle data, making the codebase cleaner and more maintainable.

Variation of the pattern

A variation of the useUser would be expose the fetchUsers function, and it does not trigger the data fetching itself:

import { useState } from "react";

const useUser = (id: string) => {
  // define the states

  const fetchUser = async () => {
    try {
      setLoading(true);
      const data = await get<User>(`/users/${id}`);
      setUser(data);
    } catch (e) {
      setError(e as Error);
    } finally {
      setLoading(false);
    }
  };

  return {
    loading,
    error,
    user,
    fetchUser,
  };
};

And then on the calling site, Profile component use useEffect to fetch the data and render different states.

const Profile = ({ id }: { id: string }) => {
  const { loading, error, user, fetchUser } = useUser(id);

  useEffect(() => {
    fetchUser();
  }, []);

  // render correspondingly
};

The advantage of this division is the ability to reuse these stateful logics across different components. For instance, another component needing the same data (a user API call with a user ID) can simply import the useUser Hook and utilize its states. Different UI components might choose to interact with these states in various ways, perhaps using alternative loading indicators (a smaller spinner that fits to the calling component) or error messages, yet the fundamental logic of fetching data remains consistent and shared.

Implementing Parallel Data Fetching in React

Upon application launch, data fetching begins, abstracting the fetching process from subcomponents. For example, in Profile component, both UserBrief and Friends are presentational components that react to the passed data. This way we could develop these component separately (adding styles for different states, for example). These presentational components normally are easy to test and modify as we have separate the data fetching and rendering.

We can define a custom hook useProfileData that facilitates parallel fetching of data related to a user and their friends by using Promise.all. This method allows simultaneous requests, optimizing the loading process and structuring the data into a predefined format known as ProfileData.

Here’s a breakdown of the hook implementation:

import { useCallback, useEffect, useState } from "react";

type ProfileData = {
  user: User;
  friends: User[];
};

const useProfileData = (id: string) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | undefined>(undefined);
  const [profileState, setProfileState] = useState<ProfileData>();

  const fetchProfileState = useCallback(async () => {
    try {
      setLoading(true);
      const [user, friends] = await Promise.all([
        get<User>(`/users/${id}`),
        get<User[]>(`/users/${id}/friends`),
      ]);
      setProfileState({ user, friends });
    } catch (e) {
      setError(e as Error);
    } finally {
      setLoading(false);
    }
  }, [id]);

  return {
    loading,
    error,
    profileState,
    fetchProfileState,
  };

};

This hook provides the Profile component with the necessary data states (loading, error, profileState) along with a fetchProfileState function, enabling the component to initiate the fetch operation as needed. Note here we use useCallback hook to wrap the async function for data fetching. The useCallback hook in React is used to memoize functions, ensuring that the same function instance is maintained across component re-renders unless its dependencies change. Similar to the useEffect, it accepts the function and a dependency array, the function will only be recreated if any of these dependencies change, thereby avoiding unintended behavior in React's rendering cycle.

The Profile component uses this hook and controls the data fetching timing via useEffect:

const Profile = ({ id }: { id: string }) => {
  const { loading, error, profileState, fetchProfileState } = useProfileData(id);

  useEffect(() => {
    fetchProfileState();
  }, [fetchProfileState]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Something went wrong...</div>;
  }

  return (
    <>
      {profileState && (
        <>
          <UserBrief user={profileState.user} />
          <Friends users={profileState.friends} />
        </>
      )}
    </>
  );
};

This approach is also known as Fetch-Then-Render, suggesting that the aim is to initiate requests as early as possible during page load. Subsequently, the fetched data is utilized to drive React's rendering of the application, bypassing the need to manage data fetching amidst the rendering process. This strategy simplifies the rendering process, making the code easier to test and modify.

And the component structure, if visualized, would be like the following illustration

Figure 8: Component structure after refactoring

And the timeline is much shorter than the previous one as we send two requests in parallel. The Friends component can render in a few milliseconds as when it starts to render, the data is already ready and passed in.

Figure 9: Parallel requests

Note that the longest wait time depends on the slowest network request, which is much faster than the sequential ones. And if we could send as many of these independent requests at the same time at an upper level of the component tree, a better user experience can be expected.

As applications expand, managing an increasing number of requests at root level becomes challenging. This is particularly true for components distant from the root, where passing down data becomes cumbersome. One approach is to store all data globally, accessible via functions (like Redux or the React Context API), avoiding deep prop drilling.

Implementing Fallback Markup in React with Suspense

Suspense in React is a mechanism for efficiently handling asynchronous operations, such as data fetching or resource loading, in a declarative manner. By wrapping components in a Suspense boundary, developers can specify fallback content to display while waiting for the component's data dependencies to be fulfilled, streamlining the user experience during loading states.

While with the Suspense API, in the Friends you describe what you want to get and then render:

import useSWR from "swr";
import { get } from "../utils.ts";

function Friends({ id }: { id: string }) {
  const { data: users } = useSWR("/api/profile", () => get<User[]>(`/users/${id}/friends`), {
    suspense: true,
  });

  return (
    <div>
      <h2>Friends</h2>
      <div>
        {friends.map((user) => (
          <Friend user={user} key={user.id} />
        ))}
      </div>
    </div>
  );
}

And declaratively when you use the Friends, you use Suspense boundary to wrap around the Friends component:

<Suspense fallback={<FriendsSkeleton />}>
  <Friends id={id} />
</Suspense>

Suspense manages the asynchronous loading of the Friends component, showing a FriendsSkeleton placeholder until the component's data dependencies are resolved. This setup ensures that the user interface remains responsive and informative during data fetching, improving the overall user experience.

Use the pattern in Vue.js

It's worth noting that Vue.js is also exploring a similar experimental pattern, where you can employ Fallback Markup using:

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

Upon the first render, <Suspense> attempts to render its default content behind the scenes. Should it encounter any asynchronous dependencies during this phase, it transitions into a pending state, where the fallback content is displayed instead. Once all the asynchronous dependencies are successfully loaded, <Suspense> moves to a resolved state, and the content initially intended for display (the default slot content) is rendered.

Deciding Placement for the Loading Component

You may wonder where to place the FriendsSkeleton component and who should manage it. Typically, without using Fallback Markup, this decision is straightforward and handled directly within the component that manages the data fetching:

const Friends = ({ id }: { id: string }) => {
  // Data fetching logic here...

  if (loading) {
    // Display loading indicator
  }

  if (error) {
    // Display error message component
  }

  // Render the actual friend list
};

In this setup, the logic for displaying loading indicators or error messages is naturally situated within the Friends component. However, adopting Fallback Markup shifts this responsibility to the component’s consumer:

<Suspense fallback={<FriendsSkeleton />}>
  <Friends id={id} />
</Suspense>

In real-world applications, the optimal approach to handling loading experiences depends significantly on the desired user interaction and the structure of the application. For instance, a hierarchical loading approach where a parent component ceases to show a loading indicator while its children components continue can disrupt the user experience. Thus, it's crucial to carefully consider at what level within the component hierarchy the loading indicators or skeleton placeholders should be displayed.

Think of Friends and FriendsSkeleton as two distinct component states—one representing the presence of data, and the other, the absence. This concept is somewhat analogous to using a Speical Case pattern in object-oriented programming, where FriendsSkeleton serves as the 'null' state handling for the Friends component.

The key is to determine the granularity with which you want to display loading indicators and to maintain consistency in these decisions across your application. Doing so helps achieve a smoother and more predictable user experience.

Leveraging the Dynamic Import Operator

The dynamic import operator in JavaScript streamlines the process of loading modules. Though it may resemble a function call in your code, such as import("./user-detail-card.tsx"), it's important to recognize that import is actually a keyword, not a function. This operator enables the asynchronous and dynamic loading of JavaScript modules.

With dynamic import, you can load a module on demand. For example, we only load a module when a button is clicked:

button.addEventListener("click", (e) => {

  import("/modules/some-useful-module.js")
    .then((module) => {
      module.doSomethingInteresting();
    })
    .catch(error => {
      console.error("Failed to load the module:", error);
    });
});

The module is not loaded during the initial page load. Instead, the import() call is placed inside an event listener so it only be loaded when, and if, the user interacts with that button.

You can use dynamic import operator in React and libraries like Vue.js. React simplifies the code splitting and lazy load through the React.lazy and Suspense APIs. By wrapping the import statement with React.lazy, and subsequently wrapping the component, for instance, UserDetailCard, with Suspense, React defers the component rendering until the required module is loaded. During this loading phase, a fallback UI is presented, seamlessly transitioning to the actual component upon load completion.

import React, { Suspense } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@nextui-org/react";
import { UserBrief } from "./user.tsx";

const UserDetailCard = React.lazy(() => import("./user-detail-card.tsx"));

export const Friend = ({ user }: { user: User }) => {
  return (
    <Popover placement="bottom" showArrow offset={10}>
      <PopoverTrigger>
        <button>
          <UserBrief user={user} />
        </button>
      </PopoverTrigger>
      <PopoverContent>
        <Suspense fallback={<div>Loading...</div>}>
          <UserDetailCard id={user.id} />
        </Suspense>
      </PopoverContent>
    </Popover>
  );
};

This snippet defines a Friend component displaying user details within a popover from Next UI, which appears upon interaction. It leverages React.lazy for code splitting, loading the UserDetailCard component only when needed. This lazy-loading, combined with Suspense, enhances performance by splitting the bundle and showing a fallback during the load.

If we visualize the above code, it renders in the following sequence.

Figure 13: Dynamic load component when needed

Note that when the user hovers and we download the JavaScript bundle, there will be some extra time for the browser to parse the JavaScript. Once that part of the work is done, we can get the user details by calling /users/<id>/details API. Eventually, we can use that data to render the content of the popup UserDetailCard.

Lazy load in other frontend libraries

Again, this pattern is widely adopted in other frontend libraries as well. For example, you can use defineAsyncComponent in Vue.js to achieve the samiliar result - only load a component when you need it to render:

<template>
  <Popover placement="bottom" show-arrow offset="10">
  <!-- the rest of the template -->
  </Popover>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import Popover from 'path-to-popover-component';
import UserBrief from './UserBrief.vue';

const UserDetailCard = defineAsyncComponent(() => import('./UserDetailCard.vue'));

// rendering logic
</script>

The function defineAsyncComponent defines an async component which is lazy loaded only when it is rendered just like the React.lazy.

As you might have already seen the noticed, we are running into a Request Waterfall here again: we load the JavaScript bundle first, and then when it execute it sequentially call user details API, which makes some extra waiting time. We could request the JavaScript bundle and the network request parallely. Meaning, whenever a Friend component is hovered, we can trigger a network request (for the data to render the user details) and cache the result, so that by the time when the bundle is downloaded, we can use the data to render the component immediately.

Implementing Prefetching in React

For example, we can use preload from the swr package (the function name is a bit misleading, but it is performing a prefetch here), and then register an onMouseEnter event to the trigger component of Popover,

import { preload } from "swr";
import { getUserDetail } from "../api.ts";

const UserDetailCard = React.lazy(() => import("./user-detail-card.tsx"));

export const Friend = ({ user }: { user: User }) => {
  const handleMouseEnter = () => {
    preload(`/user/${user.id}/details`, () => getUserDetail(user.id));
  };

  return (
    <Popover placement="bottom" showArrow offset={10}>
      <PopoverTrigger>
        <button onMouseEnter={handleMouseEnter}>
          <UserBrief user={user} />
        </button>
      </PopoverTrigger>
      <PopoverContent>
        <Suspense fallback={<div>Loading...</div>}>
          <UserDetailCard id={user.id} />
        </Suspense>
      </PopoverContent>
    </Popover>
  );
};

That way, the popup itself can have much less time to render, which brings a better user experience.

Figure 14: Dynamic load with prefetch in parallel

So when a user hovers on a Friend, we download the corresponding JavaScript bundle as well as download the data needed to render the UserDetailCard, and by the time UserDetailCard renders, it sees the existing data and renders immediately.

Figure 15: Component structure with dynamic load

As the data fetching and loading is shifted to Friend component, and for UserDetailCard, it reads from the local cache maintained by swr.

import useSWR from "swr";

export function UserDetailCard({ id }: { id: string }) {
  const { data: detail, isLoading: loading } = useSWR(
    `/user/${id}/details`,
    () => getUserDetail(id)
  );

  if (loading || !detail) {
    return <div>Loading...</div>;
  }

  return (
    <div>
    {/* render the user detail*/}
    </div>
  );
}

This component uses the useSWR hook for data fetching, making the UserDetailCard dynamically load user details based on the given id. useSWR offers efficient data fetching with caching, revalidation, and automatic error handling. The component displays a loading state until the data is fetched. Once the data is available, it proceeds to render the user details.

In summary, we've already explored critical data fetching strategies: Asynchronous State Handler , Parallel Data Fetching , Fallback Markup , Code Splitting and Prefetching . Elevating requests for parallel execution enhances efficiency, though it's not always straightforward, especially when dealing with components developed by different teams without full visibility. Code splitting allows for the dynamic loading of non-critical resources based on user interaction, like clicks or hovers, utilizing prefetching to parallelize resource loading.