React · Theory

Code Splitting in React

Theory

34/94

Code Splitting in React

Code splitting loads JS when needed. React.lazy(() => import('./Chart')) + <Suspense fallback={<p>Loading…</p>}>. Split heavy routes and charts, not a 3-line Button. Default Vite already splits vendor vs app; lazy is extra for large screens.

Error boundary around a lazy route is nice — chunk fail on bad network. Don’t lazy everything or you’ll flicker Loading on every tiny widget.

Code Splitting in React — first paint Loading… then Chart. Don’t lazy-load a 3-line Button.

Exam tip

lazy + Suspense. When it’s worth it.

Example

// Code splitting
import { lazy, Suspense } from "react";

const Chart = lazy(() => import("./Chart"));

export default function Dashboard() {
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <Chart />
    </Suspense>
  );
}

Code Splitting in React — first paint Loading… then Chart. Don’t lazy-load a 3-line Button.

Short notes

API : lazy + Suspense.
Useheavy routes.
Traplazy-load tiny buttons.

// Code splitting import { lazy, Suspense } from "react"; const Chart = lazy(() => import("./Chart")); export default function Dashboard() { return ( <Suspense fallback={<p>Loading…</p>}> <Chart /> </Suspense> ); }

Code Splitting in React

Example

Short notes

Questions

Code Splitting in React

Example

Short notes

Questions