How do React.lazy and Suspense work together?

How do React.lazy and Suspense work together?

• A. React.lazy loads components at compile time; Suspense hides errors.
• B. React.lazy allows dynamic import of components; Suspense shows a fallback while loading.
• C. React.lazy requires a separate bundler; Suspense handles error boundaries.
• D. React.lazy preloads all modules; Suspense caches them.

Answer: (B)

Dynamic loading of components with a loading indicator. React.lazy lets you declare a component that is loaded with import(), so the code for that component is split into its own chunk and fetched only when needed. Suspense provides a fallback UI to show while that chunk is being loaded. When you render a lazy component inside a Suspense boundary, React starts fetching the module; the fallback UI is shown until the module finishes loading, after which the actual component is rendered. This pairing lets you keep the initial bundle small and provide immediate feedback to users during loading. The lazy module should export the component as a default export, and if multiple lazy components load, the fallback covers them within that boundary.

Dynamic loading of components with a loading indicator. React.lazy lets you declare a component that is loaded with import(), so the code for that component is split into its own chunk and fetched only when needed. Suspense provides a fallback UI to show while that chunk is being loaded. When you render a lazy component inside a Suspense boundary, React starts fetching the module; the fallback UI is shown until the module finishes loading, after which the actual component is rendered. This pairing lets you keep the initial bundle small and provide immediate feedback to users during loading. The lazy module should export the component as a default export, and if multiple lazy components load, the fallback covers them within that boundary.