CodePark/ questions / Performance: code splitting
START PRACTICINGPRACTICE
Frontend question · React › Performance: code splitting

What is wrong with this code?

function Editor() {
  const [tab, setTab] = useState('text');
  const Preview = lazy(() => import('./Preview.jsx'));
  return (
    <Suspense fallback={<Spinner />}>
      <Tabs value={tab} onChange={setTab} />
      <Preview />
    </Suspense>
  );
}
Each render creates a new component type, so Preview remounts and loses its state

Each render creates a new component type, so Preview remounts and loses its state. Every lazy call returns a new component type. On each re-render, React sees a different type and remounts Preview. It resets its state and may suspend again, showing the spinner.

The "module is cached" option is the tempting wrong answer. The module itself is cached, but the component type is still new each time. lazy does not need to be awaited, and Suspense can wrap any children. Declare lazy components at module top level.