Stop using useQuery from React-Query !

In any web application, managing loading and error states is crucial. Displaying loading states keeps the user informed, but historically, this management can be tedious to implement manually.

React Query greatly simplifies the handling of loading states and global states. Indeed, React Query avoids redundant requests, thereby optimizing the application's performance.

Let's take a code example that implements a loading state in our application.

Define a hook to fetch a list of users:

export const useUsers = () => {
  const { data, isLoading } = useQuery<User[]>({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

Here, we fetch four users with useQuery. We add a 2-second delay to illustrate the loading state. We then return the data and a boolean for the loading state.

On the component side, let's create a component named Example:

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

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

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <UsersList users={users} />
    </div>
  );
};

In this component, we use our hook to fetch the list of users. Before rendering the view, we perform an "early return" with a loading message, then display the title, button, and users.

Limitations and Alternatives

However, each network call requires explicit management of the loading state. If the code is not factorized, some elements of the view might be waiting to be displayed, such as the title and action.

Here is an alternative to avoid blocking the view:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      {isLoading ? <div>Loading...</div> : <UsersList users={users} />}
    </div>
  );
};

Here, we use conditional rendering instead of an "early return". This solution is less readable and harder to maintain in complex components.

The Ideal Solution: A Generic Loading Component

The most ingenious solution is to create a component that renders our loading message or our main component based on a variable.

type Props = PropsWithChildren<{
  isLoading: boolean;
}>;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <>{children}</>;
};

Usage in Our Component

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      ...
      <LoadingWrapper isLoading={isLoading}>
        <UsersList users={users} />
      </LoadingWrapper>
    </div>
  );
};

This factorization centralizes the conditional rendering logic and unifies the use of loading messages, offering cleaner and more maintainable code.

Discover the Magic of Suspense

But now, if I tell you that this component we just created is already built into React. Even better, it's magical! No more manual management of isLoading states!

How?

With React's Suspense (\>= React.js version 16.6), everything becomes simpler and cleaner. Suspense allows you to explicitly declare to React that a component is waiting for asynchronous data, and React takes care of managing everything for us.

Implementing useSuspenseQuery

Let's use useSuspenseQuery to automatically manage the loading state. Here's how to do it:

Hook to Fetch Users

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery<User[]>(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

Usage in the Component with Suspense

Now, let's update our Example component to use Suspense:

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return <UsersList users={users} />;
};

const Example = (): JSX.Element => {
  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <Suspense fallback={<div>Loading...</div>}>
        <UsersComponent />
      </Suspense>
    </div>
  );
};

export default Example;

Advantages of Suspense

With Suspense, we centralize the management of the loading state in one place, making the code more readable and maintainable. The Suspense fallback automatically displays as long as the data is not available, eliminating the need to manually manage isLoading states.

Moreover, Suspense encourages development teams to factorize their code. By using standardized loading components and asynchronous state handlers, developers can create reusable and consistent modules, thus improving code quality and maintainability in the long term.

Conclusion

Using Suspense and useSuspenseQuery revolutionizes the management of loading states in React applications. This approach not only simplifies the code but also enhances the user experience by ensuring smooth and consistent rendering. Transitioning from useQuery to useSuspenseQuery is a natural evolution for cleaner and more efficient applications.

Additionally, integrating Suspense encourages development teams to factorize their code. In conclusion, adopting Suspense and useSuspenseQuery is not just a technical improvement, but also a step towards healthier and more effective development practices.