How to Introduce Concurrent UI Patterns with React Query

KakaoPay frontend developers are experimentally introducing and applying the Concurrent UI Pattern to their projects even before the official release of React 18. This covers the transition from the existing imperative approach to a declarative approach, and deals with a case of using React Query to simplify asynchronous data loading and error handling.

Transitioning from Imperative to Declarative

Existing imperative components directly managed loading state (isLoading) and error state (error) using useState and useEffect, controlling the UI through conditional rendering. In contrast, declarative components focus on WHAT the UI should show, and automatically display the appropriate UI for the situation via Suspense and Error Boundary.

• Suspense: While asynchronous data is loading, it renders the component designated as fallback (e.g., a Spinner).
• Error Boundary: Catches JavaScript errors in the child component tree, shows a fallback UI, and reports the error.

Implementation via React Query

The KakaoPay team implemented this pattern using the options of React Query's useQuery hook. Setting the suspense: true option makes useQuery behave as a special object that supports Suspense, with the parent Suspense handling the loading screen until the data is ready. They also configured error handling so that the Error Boundary takes care of errors via the useErrorBoundary: true option (the default).

• Using the react-error-boundary library, they easily implemented an error recovery button (resetErrorBoundary) and error message display.
• Currently, Suspense for asynchronous data is an experimental feature, so caution is needed when applying it to production environments.