Fix Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. in React

This error occurs when a React.lazy component is rendered without a Suspense boundary. React needs a Suspense fallback to display while the lazy-loaded chunk downloads. Fix it by wrapping the lazy component in a Suspense component with a fallback prop providing a loading state like a spinner or skeleton screen.

Reading the Stack Trace

Here's what each line means:

• at throwException (node_modules/react-dom/cjs/react-dom.development.js:19221:35): React throws because a lazy component suspended but no Suspense boundary exists to catch and display a fallback.
• at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26440:7): The render is happening synchronously, which means React cannot gracefully handle the suspension without a fallback.
• at App (webpack-internal:///./src/App.tsx:22:14): App.tsx line 22 renders the lazy component without wrapping it in Suspense.

Common Causes

const Dashboard = React.lazy(() => import('./Dashboard'));

export default function App() {
  return (
    <div>
      <Dashboard />
    </div>
  );
}

const Dashboard = React.lazy(() => import('./Dashboard'));
const Settings = React.lazy(() => import('./Settings'));

export default function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Navbar />
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

const Dashboard = React.lazy(() => import('./Dashboard'));

export default function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

The Fix

Wrap the lazy-loaded Dashboard component in a Suspense boundary with a fallback element. React will display the fallback while the chunk is loading, then swap in the real component once it is ready.

const Dashboard = React.lazy(() => import('./Dashboard'));

export default function App() {
  return (
    <div>
      <Dashboard />
    </div>
  );
}

import React, { Suspense } from 'react';

const Dashboard = React.lazy(() => import('./Dashboard'));

export default function App() {
  return (
    <div>
      <Suspense fallback={<p>Loading dashboard...</p>}>
        <Dashboard />
      </Suspense>
    </div>
  );
}

Testing the Fix

import { render, screen, waitFor } from '@testing-library/react';
import App from './App';

jest.mock('./Dashboard', () => ({
  __esModule: true,
  default: () => <div>Dashboard Content</div>,
}));

describe('App with lazy Dashboard', () => {
  it('shows loading fallback initially', () => {
    render(<App />);
    expect(screen.getByText('Loading dashboard...')).toBeInTheDocument();
  });

  it('renders Dashboard after loading', async () => {
    render(<App />);
    await waitFor(() => {
      expect(screen.getByText('Dashboard Content')).toBeInTheDocument();
    });
  });

  it('does not crash when lazy component loads', async () => {
    expect(() => render(<App />)).not.toThrow();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-lazy-suspense-error,git add src/App.tsx src/__tests__/App.test.tsx,git commit -m "fix: wrap lazy-loaded Dashboard in Suspense boundary",git push origin fix/react-lazy-suspense-error

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm lazy loading works with the Suspense boundary.
2. Open a pull request with the Suspense wrapper changes.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the lazy component loads correctly in staging.

Frequently Asked Questions