React Performance Patterns

Performance impacts user experience directly. Here are proven patterns to optimize React apps.

Avoid Unnecessary Re-renders#

// Problem: Object created on every render
function Parent() {
  const [count, setCount] = useState(0);

  // New object every render causes Child to re-render
  const config = { theme: 'dark' };

  return <Child config={config} />;
}

// Solution: Memoize the object
function Parent() {
  const [count, setCount] = useState(0);

  const config = useMemo(() => ({ theme: 'dark' }), []);

  return <Child config={config} />;
}

// Solution: Move outside component
const config = { theme: 'dark' };

function Parent() {
  const [count, setCount] = useState(0);
  return <Child config={config} />;
}

Memoize Callbacks#

// Problem: New function every render
function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('');

  // handleSubmit is recreated every render
  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <MemoizedButton onClick={handleSubmit}>Search</MemoizedButton>
    </form>
  );
}

// Solution: useCallback
function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('');

  const handleSubmit = useCallback((e) => {
    e.preventDefault();
    onSearch(query);
  }, [query, onSearch]);

  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <MemoizedButton onClick={handleSubmit}>Search</MemoizedButton>
    </form>
  );
}

List Virtualization#

import { FixedSizeList } from 'react-window';

// Problem: Rendering thousands of items
function SlowList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// Solution: Virtualize the list
function FastList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <FixedSizeList
      height={400}
      width="100%"
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

// With memoized rows
const Row = memo(({ data, index, style }) => (
  <div style={style}>
    {data[index].name}
  </div>
));

function FastList({ items }) {
  return (
    <FixedSizeList
      height={400}
      width="100%"
      itemCount={items.length}
      itemSize={35}
      itemData={items}
    >
      {Row}
    </FixedSizeList>
  );
}

Debounce and Throttle#

// Problem: API call on every keystroke
function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    searchAPI(query).then(setResults);
  }, [query]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// Solution: Debounce the API call
function Search() {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [results, setResults] = useState([]);

  // Debounce the query
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedQuery(query);
    }, 300);

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

  // Fetch with debounced query
  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery).then(setResults);
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// Custom hook
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Code Splitting#

import { lazy, Suspense } from 'react';

// Split by route
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Profile = lazy(() => import('./Profile'));

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  );
}

// Split by feature
function ProductPage() {
  const [showReviews, setShowReviews] = useState(false);

  const Reviews = lazy(() => import('./Reviews'));

  return (
    <div>
      <ProductInfo />
      <button onClick={() => setShowReviews(true)}>Show Reviews</button>

      {showReviews && (
        <Suspense fallback={<ReviewsSkeleton />}>
          <Reviews productId={id} />
        </Suspense>
      )}
    </div>
  );
}

Image Optimization#

import Image from 'next/image';

// Use Next.js Image for automatic optimization
function Gallery({ images }) {
  return (
    <div>
      {images.map(img => (
        <Image
          key={img.id}
          src={img.url}
          alt={img.alt}
          width={400}
          height={300}
          loading="lazy"
          placeholder="blur"
          blurDataURL={img.blurUrl}
        />
      ))}
    </div>
  );
}

// Native lazy loading
function NativeGallery({ images }) {
  return (
    <div>
      {images.map(img => (
        <img
          key={img.id}
          src={img.url}
          alt={img.alt}
          loading="lazy"
          decoding="async"
        />
      ))}
    </div>
  );
}

State Colocation#

// Problem: State too high in tree
function App() {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <div>
      <Header />
      <Sidebar />
      {/* Only SearchForm uses searchQuery */}
      <SearchForm query={searchQuery} setQuery={setSearchQuery} />
      <ItemList selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
    </div>
  );
}

// Solution: Colocate state with usage
function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <SearchForm /> {/* Manages its own state */}
      <ItemList />   {/* Manages its own state */}
    </div>
  );
}

function SearchForm() {
  const [query, setQuery] = useState('');

  return (
    <input value={query} onChange={e => setQuery(e.target.value)} />
  );
}

Avoid Layout Thrashing#

// Problem: Multiple DOM reads/writes
function resizeElements() {
  elements.forEach(el => {
    const height = el.offsetHeight; // Read
    el.style.height = height + 10 + 'px'; // Write
  });
}

// Solution: Batch reads, then writes
function resizeElements() {
  // Read phase
  const heights = elements.map(el => el.offsetHeight);

  // Write phase
  elements.forEach((el, i) => {
    el.style.height = heights[i] + 10 + 'px';
  });
}

// In React, use refs and useLayoutEffect
function Component() {
  const ref = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (ref.current) {
      // Batched DOM operations
      const height = ref.current.offsetHeight;
      ref.current.style.minHeight = `${height}px`;
    }
  }, []);

  return <div ref={ref}>Content</div>;
}

Profiling#

import { Profiler } from 'react';

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number
) {
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
  });
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

// Use React DevTools Profiler for visual analysis
// Chrome DevTools Performance tab for runtime analysis

Bundle Optimization#

// next.config.js
module.exports = {
  // Analyze bundle
  webpack: (config, { isServer }) => {
    if (process.env.ANALYZE) {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: true,
        })
      );
    }
    return config;
  },
};

// Import only what you need
// Bad
import _ from 'lodash';
_.debounce(fn, 300);

// Good
import debounce from 'lodash/debounce';
debounce(fn, 300);

// Or use lodash-es with tree shaking
import { debounce } from 'lodash-es';

Best Practices#

Rendering:
✓ Use React.memo for expensive components
✓ Memoize callbacks and objects
✓ Keep state as local as possible
✓ Use keys properly in lists

Data:
✓ Debounce user input
✓ Virtualize long lists
✓ Paginate or infinite scroll
✓ Cache API responses

Bundle:
✓ Code split by route
✓ Lazy load heavy components
✓ Tree shake imports
✓ Analyze bundle regularly

React performance optimization focuses on minimizing unnecessary work: re-renders, network requests, and bundle size. Use profiling tools to identify bottlenecks, apply memoization strategically, and code split to reduce initial load. Most importantly, measure before and after optimizing to ensure real improvements.