Lazy Loading & Code Splitting

What is the recommended way to implement lazy loading for React components?

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <LazyComponent />
    </Suspense>
  );
}

Using regular import statements
Using require() function
Using React.lazy with Suspense
React.lazy with Suspense is the recommended way to implement component lazy loading in React applications because: 1) It integrates seamlessly with React's component model, 2) Provides a declarative way to specify loading states with fallback content, 3) Handles loading states and errors automatically, 4) Works well with code splitting tools like webpack. The Suspense component wraps lazy-loaded components and shows fallback content (like a loading spinner) while the component is being loaded. This pattern provides a clean, maintainable way to implement lazy loading while ensuring good user experience during loading states.
Using setTimeout for delayed loading

Next Question (5/20)