What is lazy loading in React?

Lazy loading in React defers loading a component's code until it is actually needed, reducing the initial bundle size and improving page load time. React.lazy() dynamically imports a component: const LazyComponent = React.lazy(() => import("./LazyComponent"));. The component must be a default export. Use it with <Suspense> to show a fallback while the component loads: <Suspense fallback={<Spinner />}><LazyComponent /></Suspense>. Code splitting: bundlers (webpack, Vite) create a separate JavaScript "chunk" for lazily imported modules. When React needs the component, it fetches that chunk from the server on demand. Good candidates for lazy loading: route-level components (each page loads its own code), modal dialogs (only load when opened), admin/rarely-visited sections. Not suitable for: components above the fold that must render immediately, tiny components where the overhead of a network request outweighs savings. Works with React Router: lazy-load each route's component for automatic route-based code splitting.