Code Quiz

Lazy Loading a Chart Component

A React.lazy code-splitting setup that quietly remounts and re-suspends on every render.

Codejavascript

import React, { Suspense } from 'react';

function Dashboard({ metrics }) {
  const Chart = React.lazy(() => import('./HeavyChart'));

  return (
    <div>
      <Header title={metrics.title} />
      <Suspense fallback={<Spinner />}>
        <Chart data={metrics.data} />
      </Suspense>
    </div>
  );
}

export default Dashboard;

What is the bug that hurts runtime rendering performance in this code?

Next →Bundle Size vs Runtime Cost