React 18 : Suspense

In React 18, the concept of suspense has been introduced as a built-in feature. Suspense allows you to manage and handle asynchronous operations, such as data fetching or code splitting, in a more declarative manner. It enables you to suspend the rendering of a component while it's waiting for some asynchronous work to complete, and then display fallback content until the work is finished.

 

Here are the key aspects of suspense in React 18:

1. Error Boundaries: Suspense works in conjunction with error boundaries to handle errors that occur during the loading phase. Error boundaries are special components that catch and handle errors in their child components. With suspense, you can wrap components in an error boundary to gracefully handle errors that may occur while loading data or code.
2. Suspense Component: React 18 introduces a new <Suspense> component that you can use to define the boundaries of suspended components. When a suspended component is encountered, React will automatically render the fallback content provided by the <Suspense> component until the suspended component finishes loading.
3. Fallback Content: The <Suspense> component allows you to define what content to display while waiting for the suspended component to resolve. This can be useful to show loading spinners, placeholders, or any other UI that informs the user about the ongoing asynchronous operation.
4. Suspense with Data Fetching: In React 18, you can use suspense to handle asynchronous data fetching. You can define a data-fetching function as a suspense resource and use it in your component. When the component is rendered, the suspense mechanism will automatically handle the loading state and display fallback content until the data is fetched.
5. Code Splitting: Suspense can also be used for code splitting. With code splitting, you can split your application code into smaller chunks that are loaded on-demand. By using the <Suspense> component, you can specify the fallback content to be displayed while waiting for the dynamically loaded code to be fetched and executed.

Overall, suspense in React 18 provides a more streamlined and declarative way to handle asynchronous operations and improve the user experience by displaying fallback content during loading periods. It simplifies the management of asynchronous code and error handling in React applications.

 

https://www.daleseo.com/react-suspense/

React Suspense 소개 (feat. React v18)

https://blog.mathpresso.com/suspense-ssr-architecture-in-react-18-ec75e80eb68d

Suspense SSR Architecture in React 18