Code Splitting & Performance

🔍 What Is It?

React performance optimisation covers two areas:

1. Bundle performance (load time):

• →Code splitting — split the bundle into chunks that load on demand
• →Tree shaking — remove unused code
• →Lazy loading — defer non-critical code

2. Render performance (runtime):

• →React.memo — prevent unnecessary component re-renders
• →useMemo — prevent expensive recalculations
• →useCallback — stable function references for memoised children
• →Virtualisation — render only visible list items (react-window, TanStack Virtual)
• →Concurrent features — React 18 useTransition, useDeferredValue

🎯 Why Do We Need It?

Performance directly impacts business metrics:

• →1 second delay in page load = 7% reduction in conversions (Amazon study)
• →Core Web Vitals (LCP, FID, CLS) affect Google search ranking
• →Slow UIs increase user frustration and support tickets
• →Large bundles are painful on mobile data connections

In enterprise apps, performance problems compound: a slow dashboard that re-renders 50 components on every keystroke becomes unusable at scale.

🏗️ What Happens in Real Projects?

In a real insurance claims dashboard:

• →Virtualise the claims list (potentially thousands of rows) with react-window
• →Lazy load the PDF viewer, rich text editor, and chart library
• →Debounce search input to reduce API calls
• →useTransition to keep the UI responsive while filtering a large list
• →Memoize the claims table rows to prevent re-renders when selecting a row

⚙️ How It Works

React 18 Concurrent Features:

useTransition — marks a state update as non-urgent. React can interrupt it to handle urgent updates (user input stays responsive):

const [isPending, startTransition] = useTransition();
startTransition(() => setFilter(newFilter)); // non-urgent

useDeferredValue — defers updating a value until the browser is idle:

const deferredQuery = useDeferredValue(searchQuery);
// deferredQuery lags behind searchQuery — used for expensive rendering

Virtualisation:

Instead of rendering 10,000 list items (most off-screen), render only the ~20 visible ones. As the user scrolls, swap items in and out. Libraries: react-window, TanStack Virtual.

💻 Example

Performance Patterns in Production — useTransition for responsive filtering and virtualised lists.

import { useState, useTransition, useDeferredValue } from 'react';

function ClaimsSearch({ claims }: { claims: Claim[] }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value); // urgent: update input immediately

    startTransition(() => {
      setFilter(e.target.value); // non-urgent: filter can lag
    });
  };

  const filtered = useMemo(
    () => claims.filter(c => c.policyNumber.includes(filter)),
    [claims, filter]
  );

  return (
    <div>
      <input
        value={query}
        onChange={handleChange}
        placeholder="Search claims..."
      />
      {isPending && <span className="loading-indicator">Filtering...</span>}
      <ClaimsList claims={filtered} />
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits