React Performance Optimization 2026

Introduction

React performance optimization is an ongoing topic. With React 19, new optimization techniques have emerged. This guide covers complete optimization from rendering to build.

1. React.memo for Render Control

import { memo, useCallback } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onUpdate }) {
  return (
    <div>
      {data.map(item => (
        <Item key={item.id} {...item} onUpdate={onUpdate} />
      ))}
    </div>
  );
}, (prevProps, nextProps) => {
  // Custom comparison
  return prevProps.data.length === nextProps.data.length;
});

// Parent
function Parent() {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]);

  const handleUpdate = useCallback((id, newData) => {
    setItems(prev => prev.map(item => 
      item.id === id ? { ...item, ...newData } : item
    ));
  }, []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveComponent data={items} onUpdate={handleUpdate} />
    </div>
  );
}

2. useMemo for Computations

function DataTable({ data, sortKey, filterText }) {
  const processedData = useMemo(() => {
    let result = [...data];

    if (filterText) {
      result = result.filter(item => 
        item.name.toLowerCase().includes(filterText.toLowerCase())
      );
    }

    if (sortKey) {
      result.sort((a, b) => a[sortKey] - b[sortKey]);
    }

    return result;
  }, [data, sortKey, filterText]);

  return (
    <table>
      {processedData.map(item => <Row key={item.id} data={item} />)}
    </table>
  );
}

3. Virtual Lists for Large Data

import { FixedSizeList as List } from 'react-window';

function OptimizedList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <List
      height={500}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </List>
  );
}

4. Code Splitting

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

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

Summary

React performance checklist:

1. Use React.memo to control re-renders
2. useCallback/useMemo for caching
3. Virtual lists for large datasets
4. Split state to avoid unnecessary updates
5. Code splitting for faster initial load
6. Tree shaking to remove unused code

💡 Tool Recommendation: For data processing in React apps, check out DataForge Pro - a lightweight data processing tool 100x faster than Excel.

---

Originally published on WD Tech Blog