Speak React Differently in Data-Fetching

Enhancing Data-Fetching with Suspense and Error Boundaries.

In React development, useEffect has long been the standard method for handling network requests. Like many, I viewed it as a fundamental feature akin to how useState manages a component's internal state.

Photo by Rene Böhmer on Unsplash

Let's examine a typical example (Quote Of The Day) that you might have come across in your codebase:

const Quotes = () => {
  const [quotes, setQuotes] = useState<QuoteType[]>([]);
  const [isLoading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<Error | undefined>();

  useEffect(() => {
    const fetchQuotes = async () => {
      setLoading(true);
      try {
        const quotes = await getQuotes();
        setQuotes(quotes);
      } catch (e) {
        setError(e as Error);
      } finally {
        setLoading(false);
      }
    };

    fetchQuotes();
  }, []);

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

  if (error) {
    return <div>Error</div>;
  }

  return (
    <div className="quotes-container">
      {quotes.map((quote) => (
        <div key={quote._id} className="quote">
          {quote.content}
        </div>
      ))}
    </div>
  );
};

Here, we see the traditional structure: managing quotes, loading states, and error handling within the component itself.

However, with the introduction of libraries like React Query or SWR, we're able to simplify our code significantly. Consider this refactored version using useSWR:

import useSWR from "swr";

const Quotes = () => {
  const {
    data: quotes = [],
    error,
    isLoading,
  } = useSWR<QuoteType[]>("/api/quotes", getQuotes);

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

  if (error) {
    return <div>Error</div>;
  }

  return (
    <div className="quotes-container">
      {quotes.map((quote) => (
        <div key={quote._id} className="quote">
          {quote.content}
        </div>
      ))}
    </div>
  );
};

Notice how useSWR streamlines state management, encompassing loading, error, and data. The result? Shorter, more readable code. Yet, it's not quite as straightforward as managing a component without data fetching.

React, known for its declarative nature in building UIs, often presents data fetching in a different light. How can we make data-fetching in React as intuitive and declarative as building UI components? The answer may lie in React's emerging Suspense API.

The React Suspense API is a feature that allows components to “wait” for something before rendering. It’s primarily used for handling asynchronous operations like data fetching or loading components lazily. With Suspense, you can define a fallback UI that displays while waiting for the operation to complete. 

This results in a smoother user experience, as it allows components to render incrementally and reduces the need for complex state management related to loading states. It simplifies the code by making asynchronous operations look more like synchronous, linear code, improving readability and maintainability.

Imagine wrapping a data-fetching component in a way that's as simple as a regular function call, with React intuitively knowing when it's ready to render. This approach would greatly simplify the developer's task.

const Quotes = async () => {
  const quotes = await getQuotes(); //imagine if we could do this

  return (
    <div className="quotes-container">
      {quotes.map((quote) => (
        <div key={quote._id} className="quote">
          {quote.content}
        </div>
      ))}
    </div>
  );
};

With the advent of Suspense (still experimental but increasingly supported), we can approach this ideal. For instance, in SWR, we can make a function call suspendable by adding a suspense option:

import useSWR from "swr";

const Quotes = async () => {
    const quotes = await getQuotes(); // imagine if we could do this

  return (
    <div className="quotes-container">
      {quotes.map((quote) => (
        <div key={quote._id} className="quote">
          {quote.content}
        </div>
      ))}
    </div>
  );
};

In practice, this function should be wrapped within a Suspense and an Error Boundary to handle loading and error states:

import React, { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

function App() {
  return (
    <ErrorBoundary fallback={<div>Error</div>}>
      <Suspense fallback={<div>Loading</div>}>
        <Quotes />
      </Suspense>
    </ErrorBoundary>
  );
}

In the code snippet, Suspense allows the Quotes component to wait for its necessary data before rendering, showing a loading indicator during this process. The ErrorBoundary wraps the Suspense block, providing a fallback UI in case of any errors within its child components. 

By declaratively specifying behaviour for loading and error states, the code enhances readability and maintainability. Suspense abstracts the loading logic, allowing components like Quotes to focus on their core functionality without managing their loading state. Similarly, ErrorBoundary handles errors, providing a fallback UI, thus ensuring a robust and user-friendly application. This approach streamlines component logic and promotes a cleaner, more intuitive code structure, embodying the strengths of React's declarative nature.

Simplifying Asynchronous Data Fetching with Next.js

Next.js takes the concept of data fetching in React to the next level. Renowned for its server-side rendering capabilities, Next.js offers a seamless experience in building interactive, dynamic web applications.

When it comes to asynchronous data fetching, Next.js further simplifies the process. Traditionally, handling asynchronous operations in React involves managing various states and possibly using additional libraries. Next.js, however, integrates these operations more naturally into the framework's flow, making it more intuitive for developers. This integration means you can write components that fetch data asynchronously with minimal setup, as demonstrated in the snippet below:

export default async function App() {
  const quotes = await getQuotes();

  return (
    <Quote quote={quotes[0]} />
  );
}

In this example, getQuotes is an asynchronous function seamlessly integrated into the component. This approach is particularly advantageous for server-side rendered applications, where fetching data before rendering is crucial. Next.js handles the complexities of asynchronous data fetching and rendering on the server, allowing developers to write cleaner, more concise code. The result is faster page loads, improved SEO, and a better overall user experience.

Summary

As we've explored, the landscape of data-fetching in React is undergoing a transformative shift. Moving away from the traditional use of useEffect for network requests, we're now embracing more intuitive and efficient methods. Libraries like React Query and SWR have simplified the process, reducing the boilerplate code and making state management more straightforward.

The introduction of the React Suspense API marks a significant leap forward. It's changing how we handle asynchronous operations, allowing us to write code that's both cleaner and easier to understand. By enabling components to wait for data or resources before rendering, Suspense paves the way for more declarative and readable code structures.

Next.js further elevates this paradigm. It integrates asynchronous data fetching into the framework, simplifying server-side rendering and improving application performance. This approach streamlines the development process, allowing us to focus on building richer, more interactive user experiences with less concern about the underlying data-fetching logistics.

In conclusion, these advancements in React and frameworks like Next.js are not just about writing less code; they're about writing better code. As developers, we're being equipped with tools that enable us to express our application's functionality more clearly, maintainably, and efficiently. The future of React development looks promising, and it's an exciting time to be part of this evolving ecosystem.