Use React Suspense: Modern Data Fetching with React Suspense

Introduction to React Suspense

React Suspense is a built-in feature of the React ecosystem that enhances management of asynchronous component rendering, particularly in relation to data fetching. Suspense is a built-in feature, React 18 and 19 significantly expanded the functionality of Suspense, making it suitable for tasks like data fetching from API and server-side rendering. Introduced to address common UI challenges such as "pop-in" effects, where content appears abruptly after a delay, React Suspense allows components to "suspend" rendering until certain conditions, like waiting for asynchronous data loading from an API and/or component's lazy-loading are finished. Displaying suspense fallback while loading components data significantly improves user experience, making React apps feel more responsive and visually cohesive.

The core functionality revolves around the use of the React Suspense Component, which enables developers to specify alternative content (fallback UI) while the desired component data is retrieved. This approach promotes a seamless experience, as users receive immediate feedback rather than encountering blank screens or loading spinner. Additionally, React Suspense works in conjunction with features such as Concurrent Mode, allowing for better prioritization of user interactions and ensuring that component renders and applications remain responsive even during lengthy component tree loading processes.Beyond use Suspense for data fetching or rendering, it's important tool for modern react development, which facilitates code splitting through dynamic imports, enabling developers to reduce initial load times and optimize application performance. However, the feature has sparked debates regarding its limitations, including performance implications when used inappropriately and the need for effective error handling in scenarios where asynchronous data operations fail.

In this article, you'll explore how to use Suspense from multiple perspectives through the insights of industry experts who have presented at various GitNation conferences. From Maurice de Beijer's foundational overview at React Summit 2020 to Charlotte Isambert's deep dive into React Suspense internal return data mechanics at React Summit 2024, we'll examine how this powerful feature has evolved and transformed modern React development. Through practical examples of "react suspense vs", expert advices, and real-world implementations shared at events like React Summit, React Advanced and JSNation, you'll gain a comprehensive understanding of how React Suspense can be leveraged to build exceptional user experiences in your applications.

Understanding the Fundamentals

The journey to understand Suspense begins with its basic principls. At React Summit 2020, Maurice de Beijer provided a foundational overview that has become increasingly relevant as Suspense has matured to React v18 in 2022. His talk "Getting Started with Suspense and Concurrent Rendering" demonstrated how Suspense eliminates the traditional "loading state triangle" - pattern to use React Suspense to manage loading, errors, and success states manually. Through practical examples, he showed how Suspense transforms this complex pattern into a more declarative approach:

1import { ProductDetails } from './ProductDetails';
2function ProductPage() {
3  return (
4    }>
5  );
6}

1import { ProductDetails } from './ProductDetails';
2function ProductPage() {
3  return (
4    }>
5  );
6}

The mechanics behind this seemingly simple fetching data from an API are fascinating. At React Summit 2024, Charlotte Isambert delivered an enlightening deep dive in her talk "Inside React's Magic". She revealed how Suspense integrates with React's fiber architecture, explaining the sophisticated promise-based mechanism that enables components to pause rendering while waiting for data. Her presentation illuminated how Suspense coordinates with React's internal reconciler to manage these paused states efficiently, a crucial insight for developers looking to optimize their applications.

Evolution of Data Fetching: use React Suspense

Suspense for Data Fetching: How to Fetch During Render

React Summit US 2023

5 min

Suspense for Data Fetching: How to Fetch During Render

Watch video: Suspense for Data Fetching: How to Fetch During Render

Robert Balicki

Robert was most recently on the Relay team at Meta.

This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.

The true power of Suspense becomes apparent in data fetching scenarios. Robert Balicki's groundbreaking presentation at React Summit US 2023, "Suspense for Data Fetching: How to Fetch During Render", introduced a paradigm shift that challenges traditional useEffect patterns.

In this talk, Robert will discuss how React renders components with Suspense, and how to build a data-fetching library that functions correctly. What is suspense for data fetching in React? Why does React's model make creating network requests during render so difficult?

Here is code example how fetching during render, while counterintuitive, provides better user experiences and simpler code:

1const productResource = createResource(async (id) => {
2  const response = await fetch(`/api/products/${id}`);
3  return response.json();
4});
5function ProductDetails({ id }) {
6  const product = productResource.read(id);
7  // No loading state management needed!
8  return 
9{product.name}
10;
11}

1const productResource = createResource(async (id) => {
2  const response = await fetch(`/api/products/${id}`);
3  return response.json();
4});
5function ProductDetails({ id }) {
6  const product = productResource.read(id);
7  // No loading state management needed!
8  return 
9{product.name}
10;
11}

Building on these foundations, Tejas Kumar's presentation "Handling Data at Scale" at React Summit 2022 took the concept further. He demonstrated how these patterns scale to enterprise applications, showing real-world examples of managing multiple data dependencies while maintaining performance. Kumar's insights were particularly valuable for teams dealing with complex data requirements, as he showed how Suspense can elegantly handle scenarios involving multiple API calls and data transformations.

Learn React Error Handling and Boundary Management

The integration of error handling with Suspense presents unique challenges and opportunities. Maurice de Beijer's follow-up session at React Advanced 2021, "Concurrent Rendering Adventures", provided crucial insights into combining error boundaries with Suspense:

1state = { hasError: false };
2  static getDerivedStateFromError(error) {
3    return { hasError: true };
4  }
5  render() {
6    if (this.state.hasError) {
7      return ;
8    }
9    return this.props.children;
10  }
11}
12function ProductPage() {
13  return (
14      }>
15  );
16}

1state = { hasError: false };
2  static getDerivedStateFromError(error) {
3    return { hasError: true };
4  }
5  render() {
6    if (this.state.hasError) {
7      return ;
8    }
9    return this.props.children;
10  }
11}
12function ProductPage() {
13  return (
14      }>
15  );
16}

De Beijer's examples demonstrated how careful placement of error boundaries can create resilient applications that gracefully handle both loading and error states.

Slow Performance without React Suspense

The performance implications of Suspense extend beyond simple loading states. Ivan Akulov's insightful presentation at React Summit 2024, "The Invisible Hand of React Performance", revealed how Suspense works with React's concurrent features to optimize rendering. His talk uncovered how useTransition can create smoother user experiences by prioritizing different types of updates:

1const [isPending, startTransition] = useTransition();
2  const [selectedId, setSelectedId] = useState(null);
3  function selectProduct(id) {
4    startTransition(() => {
5      setSelectedId(id);
6    });
7  }
8  return (
9      {/* Render product list with smooth transitions */}
10  );
11}

1const [isPending, startTransition] = useTransition();
2  const [selectedId, setSelectedId] = useState(null);
3  function selectProduct(id) {
4    startTransition(() => {
5      setSelectedId(id);
6    });
7  }
8  return (
9      {/* Render product list with smooth transitions */}
10  );
11}

React Components and Streaming

The landscape of server-side rendering has been transformed by Suspense's capabilities. Lenz Weber-Tronic's comprehensive investigation at React Advanced 2023, "The Rocky Journey of Data Fetching Libraries", revealed the challenges and solutions in implementing streaming SSR. His talk demonstrated how modern frameworks leverage Suspense to enable component-by-component streaming:

1async function ProductPage({ id }) {
2  const product = await fetchProduct(id);
3  return (
4    }>
5      }>
6  );
7}

1async function ProductPage({ id }) {
2  const product = await fetchProduct(id);
3  return (
4    }>
5      }>
6  );
7}

Weber-Tronic's insights were particularly valuable in showing how nested Suspense boundaries enable progressive loading patterns that significantly improve perceived performance. His real-world examples demonstrated how to avoid common pitfalls in SSR implementations while maintaining optimal user experience.

GraphQL: Managing Data from an API

The integration of Suspense with GraphQL opens up powerful new possibilities. At React Summit US 2023, Jerel Miller and Alessia Bellisario delivered an enlightening presentation titled "How to Use Suspense and GraphQL with Apollo". Their talk showcased Apollo Client's advanced Suspense features and demonstrated patterns for managing complex data requirements:

1// Using Apollo's Suspense-enabled hooks as demonstrated
2  const { data } = useSuspenseQuery(PRODUCT_QUERY, {
3    variables: { id },
4    // Implementing caching strategies discussed in the talk
5    fetchPolicy: 'cache-and-network'
6  });
7  return (
8  );
9}

1// Using Apollo's Suspense-enabled hooks as demonstrated
2  const { data } = useSuspenseQuery(PRODUCT_QUERY, {
3    variables: { id },
4    // Implementing caching strategies discussed in the talk
5    fetchPolicy: 'cache-and-network'
6  });
7  return (
8  );
9}

The speakers shared invaluable insights about managing cache interactions and handling real-time updates while maintaining consistent loading states across the application.

Edge Computing and Performance Optimization

At React Advanced 2021, Sunil Pai's groundbreaking talk "Living on the Edge" revealed how Suspense can be leveraged in edge computing scenarios. Pai demonstrated how combining Suspense with edge computing platforms enables new patterns for performance optimization:

1function EdgeOptimizedProduct({ id }) {
2  return (
3    }>
4  );
5}

1function EdgeOptimizedProduct({ id }) {
2  return (
3    }>
4  );
5}

His presentation highlighted how these patterns can reduce time-to-first-byte while maintaining smooth user experiences, even in globally distributed applications.

Building Custom Suspense Implementations

Understanding how to create custom Suspense-like functionality becomes crucial as applications grow more sophisticated. Julian Burr's detailed exploration at React Summit US 2024, "Let's Build Suspense", provided deep insights into Suspense's internal workings. Burr's talk included practical examples of building custom resource handlers:

1function createResource(asyncFn) {
2  let status = 'pending';
3  let result;
4  let suspender = asyncFn().then(
5    r => {
6      status = 'success';
7      result = r;
8    },
9    e => {
10      status = 'error';
11      result = e;
12    }
13  );
14  return {
15    read() {
16      if (status === 'pending') throw suspender;
17      if (status === 'error') throw result;
18      return result;
19    }
20  };
21}

1function createResource(asyncFn) {
2  let status = 'pending';
3  let result;
4  let suspender = asyncFn().then(
5    r => {
6      status = 'success';
7      result = r;
8    },
9    e => {
10      status = 'error';
11      result = e;
12    }
13  );
14  return {
15    read() {
16      if (status === 'pending') throw suspender;
17      if (status === 'error') throw result;
18      return result;
19    }
20  };
21}

The Future of React Data Fetching Patterns

The evolution of frameworks supporting Suspense continues to accelerate. Ben Holmes's insightful presentation at React Advanced 2023, "Opt-in Design – The New Era of React Frameworks", highlighted how modern frameworks are adopting progressive enhancement patterns that leverage Suspense's capabilities. His examples demonstrated how frameworks can provide better developer experiences while maintaining optimal performance.
Taking a broader view, Ryan Carniato's illuminating talk at JSNation 2023, "SolidJS: Why All the Suspense?", offered valuable perspectives on how different frameworks approach similar challenges. His comparative analysis helped developers understand the broader context of async handling in modern web development.

Fetch Data - Practical Implementation Guidelines

Road to a Better UX with Suspense and Concurrent UI

React Summit Remote Edition 2021

9 min

Road to a Better UX with Suspense and Concurrent UI

Nikhil Sharma

Postman

This talk explores how React Suspense and Concurrent mode can enhance the user experience by controlling loading areas, prefetching data, and reducing loading time. It demonstrates how UseTransition can remove unnecessary loaders by skipping the loading state if data arrives within a specified time. The speaker advises using these experimental features in personal projects rather than enterprise applications. The talk concludes with an invitation to join the journey at Postman and thanks to the organizers, sponsors, speakers, and audience for making the conference a success.

The practical application of Suspense requires careful consideration of user experience. Nikhil Sharma's comprehensive guide presented at React Summit Remote Edition 2021, "Road to a Better UX with Suspense", provided crucial insights into implementing Suspense in production applications.
Put up your thinking caps with Suspense and Concurrent mode. In this talk you will learn how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines.

Conclusion

As React continues to evolve, Suspense remains at the forefront of modern application development. Through the insights shared in these conference talks, we can see how Suspense has transformed from a simple code-splitting solution into a comprehensive system for managing asynchronous operations. Whether you're building a small application or scaling to millions of users, understanding and properly implementing Suspense is crucial for creating optimal user experiences.
The patterns and practices demonstrated by these expert speakers show that while Suspense is powerful, it requires thoughtful implementation. By carefully considering boundary placement, concurrent features, and data fetching patterns, developers can create more responsive, maintainable, and user-friendly applications that deliver exceptional experiences to their users.