Usage

Once you've installed the package and configured it, you can start using it.

Import it from suspense-fallback-debugger:

import { Suspense } from 'suspense-fallback-debugger';

Since it's based on React's <Suspense/> API, it works exactly the same—you don't need to worry about new implementation details.

You can always check the React documentation for more information.

When you use it, the <DevTools/> component automatically catches it and displays the fallbacks.

Migrate from React Suspense

If you're currently using <Suspense/> from React, you can migrate to <Suspense/> from suspense-fallback-debugger easily.

Replace the <Suspense/> import from react with suspense-fallback-debugger:

Before:

import { Suspense } from 'react';

export function YourComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AwaitedComponent />
    </Suspense>
  )
}

After:

import { Suspense } from 'suspense-fallback-debugger';

export function YourComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AwaitedComponent />
    </Suspense>
  )
}

We kept the same API as the original <Suspense/> component, so you can migrate your code by only changing the import.

Reference

• React Suspense Documentation

What's Next?