Debug: React app slow rendering and performance profiling

React application feels slow, components re-render too often, or interactions are laggy.

React performance debugging toolkit:

// 1. React DevTools Profiler
// Install React DevTools browser extension
// Profiler tab > Record > Interact > Stop
// Shows: which components rendered and why

// 2. Why did this render?
// In React DevTools Settings > Profiler > 
// "Record why each component rendered"

// 3. Highlight renders visually
// React DevTools Settings > General >
// "Highlight updates when components render"

// 4. Find unnecessary re-renders
import { memo, useMemo, useCallback } from 'react';

// Wrap pure components to skip re-renders
const ExpensiveList = memo(function ExpensiveList({ items }) {
  return items.map(item => <Item key={item.id} {...item} />);
});

// Memoize expensive computations
function Dashboard({ data }) {
  const stats = useMemo(() => {
    return computeExpensiveStats(data);
  }, [data]);
  return <StatsView stats={stats} />;
}

// Stabilize callback references
function Parent() {
  const handleClick = useCallback((id) => {
    setSelected(id);
  }, []);
  return <ChildList onClick={handleClick} />;
}

// 5. Console-based profiling
console.time('render');
// ... component renders ...
console.timeEnd('render');

// 6. Check for layout thrashing
// Performance tab in Chrome DevTools
// Look for purple "Layout" bars during interaction
// Usually caused by reading then writing DOM in a loop

// 7. Common culprits:
// - Creating new objects/arrays in render
//   BAD:  <Child style={{ color: 'red' }} />
//   GOOD: const style = useMemo(() => ({ color: 'red' }), []);
//
// - Inline function props
//   BAD:  <Child onClick={() => doThing(id)} />
//   GOOD: const onClick = useCallback(() => doThing(id), [id]);
//
// - Context with large values that change often
//   Split context: one for rarely-changing, one for frequent

Most React performance issues come from unnecessary re-renders cascading through the component tree. Profiling reveals the actual bottleneck instead of guessing.

React application performance optimization