Code Splitting in React — React Technical Interview Questions & Answers

Code Splitting in React

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.

Technical Interview Tip: lazy + Suspense. When it’s worth it.

Code Examples for Code Splitting in React

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.

How to Explain Code Splitting in React to an Interviewer

Explain Code Splitting as if you are teaching a junior — definition, then one tiny UI.

lazy + Suspense. heavy routes.

Write 5–10 lines that use Code Splitting and say what the UI does.

Show JSX Say the screen

What mistake do freshers make with Code Splitting?

lazy-load tiny buttons.