Dynamic Imports (import())

What React pattern is implemented in this code?

// React component with dynamic import
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [DynamicModule, setDynamicModule] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setIsLoading(true);
    import('./heavyFeature.js')
      .then(module => {
        setDynamicModule(module.default);
        setIsLoading(false);
      })
      .catch(err => {
        setError(err);
        setIsLoading(false);
      });
  }, []);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading module</div>;
  if (!DynamicModule) return null;
  
  return <DynamicModule />;
}

Server-side rendering
Lazy component loading
This code implements the lazy component loading pattern in React: 1) The component uses dynamic import to load another component on-demand, 2) useState manages the loading state, dynamically loaded component, and error state, 3) useEffect triggers the dynamic import when the component mounts, 4) Loading and error states provide appropriate user feedback, 5) This pattern improves initial loading performance by deferring non-critical UI components, 6) It's a manual implementation of code splitting at the component level, 7) React now offers built-in tools like React.lazy and Suspense that simplify this pattern, 8) This approach works well for features that aren't needed immediately on page load.
Error boundaries
React suspense

Next Question (26/43)