`React.lazy` and `Suspense` are commonly used together to load component code only when that component is needed and show fallback UI while the code is loading. ### Without Lazy Loading A normal import loads the component as part of the application's normal [JavaScript](/courses/javascript) dependency graph: ```jsx import AdminDashboard from "./AdminDashboard"; ``` If `AdminDashboard` contains a large amount of code but most visitors never open it, including it in the initial [JavaScript](/courses/javascript) can increase the amount of code users must download before using the application. ### Loading a Component with lazy [React](/courses/reactjs) provides `lazy()`: ```jsx import { lazy } from "react"; const AdminDashboard = lazy(() => import("./AdminDashboard") ); ``` The dynamic import returns a Promise that loads the component module when [React](/courses/reactjs) first needs to render it. Conceptually: ```text Application starts ↓ AdminDashboard not needed ↓ do not load its component chunk yet ↓ user opens admin dashboard ↓ load AdminDashboard code ``` ### Why Suspense Is Needed Loading JavaScript takes time. React needs to know what should appear while the lazy component is unavailable. That is what `Suspense` provides: ```jsx import { lazy, Suspense } from "react"; const AdminDashboard = lazy(() => import("./AdminDashboard") ); function App() { return ( Loading dashboard...

}> ); } ``` The flow becomes: ```text AdminDashboard requested ↓ component code not loaded ↓ component suspends ↓ Suspense shows fallback ↓ code finishes loading ↓ AdminDashboard renders ``` ### What Does fallback Mean? The `fallback` prop defines temporary UI: ```jsx }> ``` It could be: ```text Spinner Skeleton Loading message Placeholder layout ``` ### Declare lazy Components Outside Other Components Prefer: ```jsx const Editor = lazy(() => import("./Editor") ); function Page() { return ; } ``` Avoid creating the lazy component inside another component: ```jsx function Page() { const Editor = lazy(() => import("./Editor") ); return ; } ``` because a new component type can be created during renders, which may lead to unwanted state resets. ### Interview-Ready Answer `React.lazy` defers loading a component's JavaScript until React needs to render that component. `Suspense` provides fallback UI while the lazy-loaded component is unavailable. Together they support component-level code splitting and can reduce the amount of JavaScript required during the initial page load.