Kakao Entertainment Developer Shares How to Handle Async Data and Resolve Race Conditions with React Suspense

A frontend developer from the Kakao Entertainment page service development team introduced an approach to handling asynchronous data using React Suspense. Existing Fetch-on-render or Fetch-then-render methods can cause Race Conditions or Waterfall Problems during the synchronization of component lifecycles and asynchronous tasks.

The limitations of existing methods are as follows:

• Fetch-on-render: Separating data fetching and rendering results in poor concurrency, as child components can only start fetching after the parent component's data arrives.
• Fetch-then-render: Fetching all data in one place ensures concurrency but leads to high coupling due to unclear separation of responsibilities between components.

Applying Suspense enables the implementation of the Render-as-you-fetch pattern, which starts asynchronous tasks and rendering simultaneously. When a component throws a Promise, it renders a fallback, and once the Promise resolves, it renders the actual data. This eliminates synchronization logic and allows each component to handle its data independently, reducing code complexity and coupling while enabling declarative coding.