Ryan John

Posted on Jun 1 • Originally published at vureact.top

How does VuReact implement Vue's Suspense component in React?

#javascript #webdev #vue #react

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in <Suspense> component is compiled into React code by VuReact.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with Vue 3's <Suspense> component usage.

Compilation Mapping

Suspense: Async component loading

<Suspense> is Vue's built-in component for handling asynchronous component loading. It displays fallback content while async dependencies are not yet resolved, improving the user experience.

Basic Suspense usage

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

Compiled React

import { Suspense } from '@vureact/runtime-core';

<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</Suspense>

As the example shows, Vue's <Suspense> component is compiled into the Suspense adapter component provided by VuReact Runtime — think of it as "Vue's Suspense for React".

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue <Suspense> behavior by handling async loading
Fallback content: Displays specified fallback content while async components are loading
React integration: Implements Vue's Suspense semantics in the React environment
User experience: Improves the UX during async loading

Delayed fallback content display

The timeout attribute controls when the fallback content is displayed, preventing flashing on short requests.

<template>
  <Suspense :timeout="1000">
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Over 1 second, showing loading state...</div>
    </template>
  </Suspense>
</template>

Compiled React

<Suspense 
  timeout={1000}
  fallback={<div>Over 1 second, showing loading state...</div>}
>
  <AsyncComponent />
</Suspense>

Purpose of timeout:

Anti-flash: Prevents fallback content from flashing on fast loads
User experience: Only shows loading state when loading takes longer
Performance optimization: Reduces unnecessary UI switching
Flexible configuration: Different timeout values can be set for different scenarios

Nested async dependencies

When a Suspense boundary contains multiple async components, it waits for all async dependencies to resolve before switching to the content area.

<template>
  <Suspense>
    <template #default>
      <AsyncComponentA />
      <AsyncComponentB />
    </template>
    <template #fallback>
      <div>Syncing multiple async components...</div>
    </template>
  </Suspense>
</template>

Compiled React

<Suspense fallback={<div>Syncing multiple async components...</div>}>
  <AsyncComponentA />
  <AsyncComponentB />
</Suspense>

Synchronous loading:

Unified management: Waits for all async components to finish loading
Avoids partial display: Prevents layout shifts caused by some components rendering early
Consistent experience: Provides a more uniform user experience
Error handling: Unified handling of loading error scenarios

Lifecycle callbacks

Lifecycle callbacks allow you to listen to different states of Suspense.

<template>
  <Suspense 
    @pending="onPending"
    @fallback="onFallback" 
    @resolve="onResolve"
  >
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

Compiled React

<Suspense
  fallback={<div>Loading...</div>}
  onPending={onPending}
  onFallback={onFallback}
  onResolve={onResolve}
>
  <AsyncComponent />
</Suspense>

Lifecycle events:

onPending: Triggered when waiting for async dependencies begins
onFallback: Triggered when fallback content is displayed
onResolve: Triggered when all async dependencies are resolved
State tracking: Useful for recording the async boundary state

Compilation strategy summary

VuReact's Suspense compilation strategy demonstrates a complete async loading conversion capability:

Direct component mapping: Maps Vue <Suspense> directly to VuReact's <Suspense>
Full attribute support: Supports all attributes including fallback, timeout, lifecycle callbacks, etc.
Slot conversion: Converts Vue's slot syntax into React's props syntax
Async semantics preserved: Fully preserves Vue's async loading semantics

Core features:

Fallback content: Specifies the content to display during loading via the fallback attribute
Timeout control: Controls when fallback content is displayed via timeout
Multi-component sync: Supports unified loading management for multiple async components
State monitoring: Listens to loading states through lifecycle callbacks

Important notes:

fallback required: Fallback content must be provided
timeout default: Without a timeout set, fallback content is displayed immediately
Performance considerations: Set timeout wisely to avoid unnecessary UI switching
Error handling: Needs to be combined with error boundaries for handling loading failures

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement async loading logic. The compiled code preserves Vue's async loading semantics and user experience while following React's component design patterns, keeping the migrated application fully capable of asynchronous loading.

DEV Community