Lazy Loading in React Applications

Lazy loading improves initial load time. Here's how to implement it effectively.

React.lazy and Suspense#

import { lazy, Suspense } from 'react';

// Lazy load component
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

// Multiple lazy components
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Profile = lazy(() => import('./Profile'));

function App() {
  const [view, setView] = useState('dashboard');

  return (
    <Suspense fallback={<PageSkeleton />}>
      {view === 'dashboard' && <Dashboard />}
      {view === 'settings' && <Settings />}
      {view === 'profile' && <Profile />}
    </Suspense>
  );
}

Named Exports#

// Component file exports multiple components
// components/Charts.tsx
export const BarChart = () => { ... };
export const LineChart = () => { ... };
export const PieChart = () => { ... };

// Lazy load specific export
const BarChart = lazy(() =>
  import('./Charts').then(module => ({ default: module.BarChart }))
);

// Or create a helper
function lazyNamed<T extends Record<string, React.ComponentType<any>>>(
  factory: () => Promise<T>,
  name: keyof T
) {
  return lazy(() =>
    factory().then(module => ({ default: module[name] }))
  );
}

const LineChart = lazyNamed(
  () => import('./Charts'),
  'LineChart'
);

Route-Based Code Splitting#

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Lazy load route components
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Products = lazy(() => import('./pages/Products'));
const ProductDetail = lazy(() => import('./pages/ProductDetail'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:id" element={<ProductDetail />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// Next.js automatic code splitting
// pages/dashboard.tsx is automatically code split

Preloading Components#

// Preload on hover
const Settings = lazy(() => import('./Settings'));

function NavLink() {
  const preloadSettings = () => {
    // Trigger dynamic import
    import('./Settings');
  };

  return (
    <Link
      to="/settings"
      onMouseEnter={preloadSettings}
      onFocus={preloadSettings}
    >
      Settings
    </Link>
  );
}

// Preload with custom hook
function usePreload(factory: () => Promise<any>) {
  const preload = useCallback(() => {
    factory();
  }, [factory]);

  return preload;
}

// Preload after initial render
function App() {
  useEffect(() => {
    // Preload components user likely needs
    const timer = setTimeout(() => {
      import('./Dashboard');
      import('./Profile');
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  return <Home />;
}

Error Boundaries#

import { Component, lazy, Suspense } from 'react';

class ErrorBoundary extends Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  retry = () => {
    this.setState({ hasError: false });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>Failed to load component</p>
          <button onClick={this.retry}>Retry</button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Usage
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <Suspense fallback={<Loading />}>
        <HeavyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

// Retry logic for failed imports
function lazyWithRetry(
  factory: () => Promise<{ default: React.ComponentType<any> }>,
  retries = 3
) {
  return lazy(async () => {
    let lastError: Error;

    for (let i = 0; i < retries; i++) {
      try {
        return await factory();
      } catch (error) {
        lastError = error as Error;
        await new Promise(r => setTimeout(r, 1000 * (i + 1)));
      }
    }

    throw lastError!;
  });
}

const ReliableComponent = lazyWithRetry(() => import('./Component'));

Lazy Loading Images#

// Native lazy loading
function ImageGallery({ images }: { images: string[] }) {
  return (
    <div className="gallery">
      {images.map((src, i) => (
        <img
          key={i}
          src={src}
          loading="lazy"
          alt={`Image ${i + 1}`}
        />
      ))}
    </div>
  );
}

// Intersection Observer hook
function useLazyImage(src: string): [string, boolean] {
  const [imageSrc, setImageSrc] = useState('');
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setImageSrc(src);
          observer.disconnect();
        }
      },
      { rootMargin: '100px' }
    );

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => observer.disconnect();
  }, [src]);

  return [imageSrc, isLoaded];
}

// Lazy image component
function LazyImage({ src, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef<HTMLImageElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: '50px' }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <img
      ref={ref}
      src={isVisible ? src : undefined}
      alt={alt}
      {...props}
    />
  );
}

Component-Level Code Splitting#

// Split heavy features
const RichTextEditor = lazy(() => import('./RichTextEditor'));
const ChartLibrary = lazy(() => import('./ChartLibrary'));
const VideoPlayer = lazy(() => import('./VideoPlayer'));

function ContentBlock({ type, data }: ContentBlockProps) {
  return (
    <Suspense fallback={<BlockSkeleton type={type} />}>
      {type === 'text' && <RichTextEditor content={data} />}
      {type === 'chart' && <ChartLibrary data={data} />}
      {type === 'video' && <VideoPlayer url={data.url} />}
    </Suspense>
  );
}

// Modal content
function SettingsModal({ isOpen, onClose }: ModalProps) {
  if (!isOpen) return null;

  return (
    <Modal onClose={onClose}>
      <Suspense fallback={<ModalSkeleton />}>
        <SettingsContent />
      </Suspense>
    </Modal>
  );
}

Progressive Loading#

// Load content progressively
function Dashboard() {
  return (
    <div>
      {/* Critical content first */}
      <Header />

      {/* Secondary content lazy loaded */}
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />
      </Suspense>

      <Suspense fallback={<ChartsSkeleton />}>
        <Charts />
      </Suspense>

      <Suspense fallback={<TableSkeleton />}>
        <DataTable />
      </Suspense>
    </div>
  );
}

// Skeleton components
function StatsSkeleton() {
  return (
    <div className="stats-skeleton">
      {[1, 2, 3, 4].map(i => (
        <div key={i} className="stat-card skeleton" />
      ))}
    </div>
  );
}

Bundle Analysis#

# Install webpack bundle analyzer
npm install -D webpack-bundle-analyzer

# For Vite
npm install -D rollup-plugin-visualizer

# Add to vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [
    visualizer({
      open: true,
      gzipSize: true,
    }),
  ],
};

# Analyze bundle
npm run build
# Opens visualization in browser

Best Practices#

When to Lazy Load:
✓ Routes/pages
✓ Modals and dialogs
✓ Below-the-fold content
✓ Heavy third-party libraries
✓ Features behind feature flags

Optimization:
✓ Preload on hover/focus
✓ Use meaningful loading states
✓ Implement error boundaries
✓ Analyze bundle size

UX:
✓ Show skeleton loaders
✓ Avoid layout shift
✓ Preload likely next routes
✓ Progressive enhancement

Lazy loading reduces initial bundle size and improves load times. Use React.lazy for components, route-based splitting for pages, and Intersection Observer for images. Combine with preloading strategies and meaningful loading states for the best user experience.