NikunjPithadiya
← Back to writing

⚛️⚡️ React Performance Optimization: Complete Guide to useMemo and useCallback

React's performance optimization hooks useMemo and useCallback are essential tools for building efficient applications, yet they're often misunderstood and overused. This comprehensive guide will teach you when, why, and how to use these hooks effectively, with real-world examples and best practices.

🧠 Understanding React's Rendering Fundamentals

Before diving into performance hooks, it's crucial to understand how React works. Every time your component's state or props change, React triggers a re-render process:

  1. ›⚙️ Function Execution: Your component function runs from top to bottom
  2. ›🧱 Virtual DOM Creation: React creates a new virtual representation
  3. ›🔍 Diffing: React compares the new virtual DOM with the previous version
  4. ›🧼 DOM Updates: Only changed elements are updated in the real DOM

👉 The key insight is that every variable, function, and object is recreated on each render, regardless of whether their values have actually changed.

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [preferences, setPreferences] = useState({});

  // These are ALL recreated on every render 🔄
  const userSettings = { theme: 'dark', language: 'en' };
  const handleSave = () => saveUserData(user);
  const fullName = user ? `${user.firstName} ${user.lastName}` : '';

  return (
    <div>
      <h1>{fullName}</h1>
      <Settings config={userSettings} />
      <SaveButton onClick={handleSave} />
    </div>
  );
};

🚨 Problem 1: Expensive Calculations

Consider this real-world example of a data analytics dashboard:

const SalesAnalytics = () => {
  const [salesData, setSalesData] = useState([]);
  const [dateRange, setDateRange] = useState({ start: null, end: null });
  const [refreshCounter, setRefreshCounter] = useState(0);

  // This expensive calculation runs on EVERY render 💸
  const analytics = calculateSalesMetrics(salesData, dateRange);

  // Auto-refresh every 30 seconds ⏰
  useEffect(() => {
    const interval = setInterval(() => {
      setRefreshCounter((prev) => prev + 1);
    }, 30000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>📊 Last updated: {new Date().toLocaleTimeString()}</p>
      <MetricsDisplay data={analytics} />
      <DateRangeSelector onChange={setDateRange} />
    </div>
  );
};

const calculateSalesMetrics = (data, dateRange) => {
  console.log('🔄 Calculating expensive metrics...');

  // Simulate expensive operations 🚀
  const filtered = data.filter((sale) => {
    const saleDate = new Date(sale.date);
    return (
      (!dateRange.start || saleDate >= dateRange.start) &&
      (!dateRange.end || saleDate <= dateRange.end)
    );
  });

  return {
    totalRevenue: filtered.reduce((sum, sale) => sum + sale.amount, 0),
    averageOrderValue:
      filtered.reduce((sum, sale) => sum + sale.amount, 0) / filtered.length,
    topProducts: getTopProducts(filtered),
    monthlyTrends: calculateTrends(filtered),
  };
};

⚠️ The Problem: The expensive calculateSalesMetrics function runs every 30 seconds when refreshCounter updates, even though salesData and dateRange haven't changed.

💡 Solution 1: useMemo for Expensive Calculations

const SalesAnalytics = () => {
  const [salesData, setSalesData] = useState([]);
  const [dateRange, setDateRange] = useState({ start: null, end: null });
  const [refreshCounter, setRefreshCounter] = useState(0);

  // Only recalculate when salesData or dateRange change 🎯
  const analytics = useMemo(() => {
    console.log('🔄 Calculating metrics...'); // You'll see this much less now 👍
    return calculateSalesMetrics(salesData, dateRange);
  }, [salesData, dateRange]);

  // Auto-refresh logic remains the same ⏰
  useEffect(() => {
    const interval = setInterval(() => {
      setRefreshCounter((prev) => prev + 1);
    }, 30000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <p>📊 Last updated: {new Date().toLocaleTimeString()}</p>
      <MetricsDisplay data={analytics} />
      <DateRangeSelector onChange={setDateRange} />
    </div>
  );
};

📌 Now the expensive calculation only runs when the actual dependencies change, not on every render.

🚨 Problem 2: Reference Equality and Memoized Components

Here's a common scenario with an e-commerce shopping cart:

const ShoppingCart = () => {
  const [items, setItems] = useState([]);
  const [customerInfo, setCustomerInfo] = useState({});
  const [promoCode, setPromoCode] = useState('');

  // This object is recreated on every render 🆕
  const cartSummary = {
    itemCount: items.length,
    subtotal: items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    tax: 0,
    total: 0,
  };

  // Calculate tax and total 🧮
  cartSummary.tax = cartSummary.subtotal * 0.08;
  cartSummary.total = cartSummary.subtotal + cartSummary.tax;

  const handleRemoveItem = (itemId) => {
    setItems((prev) => prev.filter((item) => item.id !== itemId));
  };

  return (
    <div>
      <ItemList items={items} onRemoveItem={handleRemoveItem} />
      <CartSummary summary={cartSummary} />
      <PromoCodeInput value={promoCode} onChange={setPromoCode} />
    </div>
  );
};

// This component should only re-render when summary changes 🎯
const CartSummary = React.memo(({ summary }) => {
  console.log('🔄 CartSummary rendered');
  return (
    <div className="cart-summary">
      <h3>📋 Order Summary</h3>
      <p>📦 Items: {summary.itemCount}</p>
      <p>💰 Subtotal: ${summary.subtotal.toFixed(2)}</p>
      <p>🏷️ Tax: ${summary.tax.toFixed(2)}</p>
      <p>💳 Total: ${summary.total.toFixed(2)}</p>
    </div>
  );
});

⚠️ The Problem: Even though CartSummary is wrapped in React.memo, it re-renders whenever promoCode changes because carrtSummary is a new object reference every time.

💡 Solution 2: useMemo for Reference Stability

const ShoppingCart = () => {
  const [items, setItems] = useState([]);
  const [customerInfo, setCustomerInfo] = useState({});
  const [promoCode, setPromoCode] = useState('');

  // Memoize the cart summary calculation 🎯
  const cartSummary = useMemo(() => {
    const subtotal = items.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    );
    const tax = subtotal * 0.08;

    return {
      itemCount: items.length,
      subtotal,
      tax,
      total: subtotal + tax,
    };
  }, [items]); // Only recalculate when items change ✅

  const handleRemoveItem = (itemId) => {
    setItems((prev) => prev.filter((item) => item.id !== itemId));
  };

  return (
    <div>
      <ItemList items={items} onRemoveItem={handleRemoveItem} />
      <CartSummary summary={cartSummary} />
      <PromoCodeInput value={promoCode} onChange={setPromoCode} />
    </div>
  );
};

🧊 Now CartSummary only re-renders when the cart items actually change, not when the promo code is typed.

🚨 Problem 3: Function References and useCallback

Functions suffer from the same reference problem. Here's a task management example:

const TaskManager = () => {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');

  // These functions are recreated on every render 🆕
  const addTask = (text) => {
    const newTask = {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date(),
    };
    setTasks((prev) => [...prev, newTask]);
  };

  const toggleTask = (id) => {
    setTasks((prev) =>
      prev.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const deleteTask = (id) => {
    setTasks((prev) => prev.filter((task) => task.id !== id));
  };

  // Filter tasks based on current filter and search term 🔍
  const filteredTasks = useMemo(() => {
    return tasks.filter((task) => {
      const matchesFilter =
        filter === 'all' ||
        (filter === 'completed' && task.completed) ||
        (filter === 'pending' && !task.completed);

      const matchesSearch = task.text
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      return matchesFilter && matchesSearch;
    });
  }, [tasks, filter, searchTerm]);

  return (
    <div>
      <TaskInput onAddTask={addTask} />
      <TaskFilters filter={filter} onFilterChange={setFilter} />
      <SearchInput value={searchTerm} onChange={setSearchTerm} />
      <TaskList
        tasks={filteredTasks}
        onToggle={toggleTask}
        onDelete={deleteTask}
      />
    </div>
  );
};

// These components are memoized but still re-render unnecessarily 😔
const TaskInput = React.memo(({ onAddTask }) => {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim()) {
      onAddTask(input.trim());
      setInput('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="➕ Add a new task..."
      />
      <button type="submit">Add</button>
    </form>
  );
});

const TaskList = React.memo(({ tasks, onToggle, onDelete }) => {
  console.log('🔄 TaskList rendered');
  return (
    <div>
      {tasks.map((task) => (
        <TaskItem
          key={task.id}
          task={task}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </div>
  );
});

⚠️ The Problem: TaskInput and TaskList re-render whenever any state changes because their function props are new references each time.

💡 Solution 3: useCallback for Function Stability

const TaskManager = () => {
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');

  // Memoize functions with useCallback 🎯
  const addTask = useCallback((text) => {
    const newTask = {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date(),
    };
    setTasks((prev) => [...prev, newTask]);
  }, []); // Empty dependency array because we use functional update ✅

  const toggleTask = useCallback((id) => {
    setTasks((prev) =>
      prev.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  }, []); // Empty dependency array because we use functional update ✅

  const deleteTask = useCallback((id) => {
    setTasks((prev) => prev.filter((task) => task.id !== id));
  }, []); // Empty dependency array because we use functional update ✅

  // Filter tasks (using useMemo as before) 🔍
  const filteredTasks = useMemo(() => {
    return tasks.filter((task) => {
      const matchesFilter =
        filter === 'all' ||
        (filter === 'completed' && task.completed) ||
        (filter === 'pending' && !task.completed);

      const matchesSearch = task.text
        .toLowerCase()
        .includes(searchTerm.toLowerCase());

      return matchesFilter && matchesSearch;
    });
  }, [tasks, filter, searchTerm]);

  return (
    <div>
      <TaskInput onAddTask={addTask} />
      <TaskFilters filter={filter} onFilterChange={setFilter} />
      <SearchInput value={searchTerm} onChange={setSearchTerm} />
      <TaskList
        tasks={filteredTasks}
        onToggle={toggleTask}
        onDelete={deleteTask}
      />
    </div>
  );
};

💡 Key Insight: By using functional updates (prev => ...), we avoid including current state in the dependency array, making our callbacks more stable.

🚀 Advanced Example: Complex Data Processing

Here's a comprehensive example showing both hooks working together in a data visualization dashboard:

const DataVisualization = () => {
  const [rawData, setRawData] = useState([]);
  const [chartType, setChartType] = useState('line');
  const [dateRange, setDateRange] = useState({ start: null, end: null });
  const [groupBy, setGroupBy] = useState('day');
  const [selectedMetrics, setSelectedMetrics] = useState(['revenue', 'users']);

  // Complex data processing with useMemo 🔄
  const processedData = useMemo(() => {
    console.log('🔄 Processing chart data...');

    // Filter by date range 📅
    const filteredData = rawData.filter((item) => {
      const date = new Date(item.timestamp);
      return (
        (!dateRange.start || date >= dateRange.start) &&
        (!dateRange.end || date <= dateRange.end)
      );
    });

    // Group data by specified period 📊
    const grouped = filteredData.reduce((acc, item) => {
      const key = getGroupKey(item.timestamp, groupBy);
      if (!acc[key]) acc[key] = [];
      acc[key].push(item);
      return acc;
    }, {});

    // Calculate metrics for each group 📈
    return Object.entries(grouped)
      .map(([period, items]) => {
        const dataPoint = { period };

        selectedMetrics.forEach((metric) => {
          switch (metric) {
            case 'revenue':
              dataPoint[metric] = items.reduce(
                (sum, item) => sum + item.revenue,
                0
              );
              break;
            case 'users':
              dataPoint[metric] = new Set(
                items.map((item) => item.userId)
              ).size;
              break;
            case 'conversions':
              dataPoint[metric] = items.filter((item) => item.converted).length;
              break;
          }
        });

        return dataPoint;
      })
      .sort((a, b) => new Date(a.period) - new Date(b.period));
  }, [rawData, dateRange, groupBy, selectedMetrics]);

  // Chart configuration object 📊
  const chartConfig = useMemo(
    () => ({
      type: chartType,
      data: processedData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          title: {
            display: true,
            text: `📊 Analytics Dashboard - ${groupBy.charAt(0).toUpperCase() + groupBy.slice(1)} View`,
          },
          legend: {
            display: selectedMetrics.length > 1,
          },
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              callback: function (value) {
                return selectedMetrics.includes('revenue')
                  ? `💰 $${value}`
                  : value;
              },
            },
          },
        },
      },
    }),
    [chartType, processedData, groupBy, selectedMetrics]
  );

  // Event handlers with useCallback 🎯
  const handleDateRangeChange = useCallback((newRange) => {
    setDateRange(newRange);
  }, []);

  const handleMetricToggle = useCallback((metric) => {
    setSelectedMetrics((prev) =>
      prev.includes(metric)
        ? prev.filter((m) => m !== metric)
        : [...prev, metric]
    );
  }, []);

  const handleExport = useCallback(() => {
    const csvContent = convertToCSV(processedData);
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `📊 analytics-${groupBy}-${Date.now()}.csv`;
    link.click();
    URL.revokeObjectURL(url);
  }, [processedData, groupBy]);

  return (
    <div className="dashboard">
      <div className="controls">
        <DateRangePicker value={dateRange} onChange={handleDateRangeChange} />
        <GroupBySelector value={groupBy} onChange={setGroupBy} />
        <MetricSelector
          selectedMetrics={selectedMetrics}
          onToggle={handleMetricToggle}
        />
        <ChartTypeSelector value={chartType} onChange={setChartType} />
      </div>

      <div className="chart-container">
        <Chart config={chartConfig} />
      </div>

      <div className="actions">
        <button onClick={handleExport}>📥 Export Data</button>
      </div>
    </div>
  );
};

// Utility function for date grouping 📅
const getGroupKey = (timestamp, groupBy) => {
  const date = new Date(timestamp);
  switch (groupBy) {
    case 'day':
      return date.toISOString().split('T')[0];
    case 'week':
      const weekStart = new Date(date.setDate(date.getDate() - date.getDay()));
      return weekStart.toISOString().split('T')[0];
    case 'month':
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`;
    default:
      return timestamp;
  }
};

const convertToCSV = (data) => {
  if (!data.length) return '';

  const headers = Object.keys(data[0]);
  const csvRows = [
    headers.join(','),
    ...data.map((row) => headers.map((header) => row[header]).join(',')),
  ];

  return csvRows.join('\n');
};

🚨 Common Pitfalls and How to Avoid Them

1. ⚠️ Overusing the Hooks

// ❌ Bad - Unnecessary memoization
const UserGreeting = ({ user }) => {
  const greeting = useMemo(() => `👋 Hello, ${user.name}!`, [user.name]);
  const isLoggedIn = useMemo(() => !!user, [user]);

  return (
    <div>
      {greeting} {isLoggedIn && '🎉 Welcome back!'}
    </div>
  );
};

// ✅ Good - Simple calculations don't need memoization
const UserGreeting = ({ user }) => {
  const greeting = `👋 Hello, ${user.name}!`;
  const isLoggedIn = !!user;

  return (
    <div>
      {greeting} {isLoggedIn && '🎉 Welcome back!'}
    </div>
  );
};

2. ⚠️ Incorrect Dependencies

// ❌ Bad - Missing dependencies
const SearchResults = ({ query, filters }) => {
  const results = useMemo(() => {
    return searchData(query, filters);
  }, [query]); // Missing 'filters'! 🚨

  return <ResultList results={results} />;
};

// ✅ Good - All dependencies included
const SearchResults = ({ query, filters }) => {
  const results = useMemo(() => {
    return searchData(query, filters);
  }, [query, filters]); // All dependencies included ✅

  return <ResultList results={results} />;
};

3. ⚠️ Creating New Objects in Dependencies

// ❌ Bad - Object created in render
const ProductList = ({ products }) => {
  const sortConfig = { field: 'name', direction: 'asc' };

  const sortedProducts = useMemo(() => {
    return sortProducts(products, sortConfig);
  }, [products, sortConfig]); // sortConfig is always new! 🚨

  return <div>{/* render products */}</div>;
};

// ✅ Good - Stable dependencies
const ProductList = ({ products }) => {
  const sortedProducts = useMemo(() => {
    const sortConfig = { field: 'name', direction: 'asc' };
    return sortProducts(products, sortConfig);
  }, [products]); // Stable dependencies ✅

  return <div>{/* render products */}</div>;
};

📊 Performance Measurement Strategy

1. 🔧 Use React DevTools Profiler

Before optimizing, always measure performance:

  1. ›🔌 Install React DevTools browser extension
  2. ›📊 Open the Profiler tab
  3. ›▶️ Click "Start profiling"
  4. ›🖱️ Interact with your app
  5. ›⏹️ Stop profiling and analyze results

2. 🎨 Enable Paint Flashing in Chrome DevTools

Paint flashing highlights the areas of the webpage that the browser engine repaints, making it possible for you to visually identify the problematic areas:

How to enable:

  1. ›🌐 Open Chrome DevTools (F12)
  2. ›Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu
  3. ›Start typing "Rendering" in the Command Menu and select "Show Rendering"
  4. ›In the Rendering tab, enable "Paint Flashing"
  5. ›Chrome flashes the screen green whenever repainting happens

What to look for:

  • ›If you're seeing the whole screen flash green, or areas of the screen that you didn't expect, then you've got some work to do
  • ›Layout and repaints are expensive in terms of performance and can make your page slow
  • ›Thanks to Paint flashing loader is marked in green and it's easy to understand which components are repainted

3. 📈 Benchmark Hook

const useBenchmark = (name, fn, deps) => {
  return useMemo(() => {
    const start = performance.now();
    const result = fn();
    const end = performance.now();

    if (end - start > 1) {
      // Only log if > 1ms ⏱️
      console.log(`⚡ ${name}: ${(end - start).toFixed(2)}ms`);
    }

    return result;
  }, deps);
};

// Usage
const DataProcessor = ({ data }) => {
  const processedData = useBenchmark(
    'Data Processing',
    () => expensiveDataProcessing(data),
    [data]
  );

  return <DataDisplay data={processedData} />;
};

4. 🔍 Additional DevTools Features

Scrolling Performance Issues:

  • ›Open the Rendering tab and check "Scrolling Performance Issues"
  • ›Chrome gives more details on the scrolling performance issues and highlights the scrolling area
  • ›It shows a label 'Repaints on scroll' and highlights the scrolling area

Best Practices:

  • ›🎨 Use Paint Flashing to identify unnecessary repaints
  • ›📊 Combine with React DevTools Profiler for complete performance analysis
  • ›🔄 Enable multiple rendering tools simultaneously for comprehensive debugging
  • ›🎯 Focus on areas that flash frequently or show red overlays
  • ›⚡ Test on slower devices to catch performance issues early
  • ›📱 Use mobile device simulation to test touch scroll performance

📋 Best Practices Summary

💡 When to Use useMemo:

  • ›💰 Expensive calculations (complex algorithms, large data processing)
  • ›🔗 Object/array creation that breaks memoized child components
  • ›🔄 Data transformations with multiple dependencies
  • ›📊 Derived state that's expensive to compute

🎯 When to Use useCallback:

  • ›🖱️ Event handlers passed to memoized components
  • ›⚙️ Functions that are dependencies of other hooks
  • ›🌐 API calls that shouldn't be recreated on every render
  • ›🔧 Custom hook functions that might be used in multiple places

🚫 When NOT to Use Them:

  • ›🔢 Simple calculations (string concatenation, basic arithmetic)
  • ›📦 Primitive values (strings, numbers, booleans)
  • ›🔄 Components that re-render frequently anyway
  • ›⏰ Premature optimization without performance measurement

📝 Essential Rules:

  1. ›📏 Measure first - Use React DevTools Profiler
  2. ›📋 Include all dependencies - Use ESLint plugin for React hooks
  3. ›🎯 Prefer stable dependencies - Avoid creating objects in render
  4. ›⚙️ Use functional updates - Reduces dependency array size
  5. ›🤝 Combine with React.memo - For maximum optimization benefit

✅ Real-World Optimization Checklist

Before applying these hooks, ask yourself:

  • ›[ ] 📊 Have I measured the performance issue?
  • ›[ ] 💰 Is this calculation actually expensive?
  • ›[ ] 🔄 Are child components unnecessarily re-rendering?
  • ›[ ] 🏗️ Could I restructure components instead?
  • ›[ ] 📋 Are all dependencies properly included?
  • ›[ ] ⚙️ Am I using functional updates where possible?

🎯 Conclusion

useMemo and useCallback are powerful optimization tools when used correctly. They solve specific problems related to expensive calculations and unnecessary re-renders. The key is understanding when these problems actually exist and applying the right solution.

Remember: React is already highly optimized. These hooks should be used to solve measured performance issues, not applied everywhere preemptively. Start with clean component architecture, measure performance with proper tools, and then optimize the bottlenecks you actually find.

Use the examples and patterns in this guide as templates, but always adapt them to your specific use case and measure the results to ensure you're actually improving performance rather than just adding complexity.

Happy optimizing! 🚀✨