react-performance

name	react-performance
description	React performance optimization patterns to prevent unnecessary re-renders, reduce bundle size, and improve user experience. Use when optimizing components, fixing slow renders, or reducing app size. Triggers on performance, optimize, slow, re-render, bundle, lazy, memo, useMemo, useCallback.

React Performance Optimization

Performance patterns to prevent unnecessary re-renders, reduce bundle size, and create responsive UIs.

When to Use This Skill

• Optimizing slow components
• Reducing bundle size
• Fixing unnecessary re-renders
• Improving initial load time
• Debugging performance issues

Critical: Prevent Waterfalls

Impact: CRITICAL - The highest impact optimization.

What is a Waterfall?

Sequential requests where each waits for the previous:

Timeline:
[----Parent Data Fetch----]
                           [----Child Data Fetch----]
                                                     [----Grandchild Fetch----]
Total: 900ms

Anti-Pattern: Fetch on Mount

// ❌ BAD: Creates waterfall
function ParentComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchParentData().then(setData);  // Child waits for this
  }, []);
  
  if (!data) return <Loading />;
  return <ChildComponent parentId={data.id} />;
}

function ChildComponent({ parentId }: { parentId: string }) {
  const [childData, setChildData] = useState(null);
  
  useEffect(() => {
    fetchChildData(parentId).then(setChildData);  // Waits for parent
  }, [parentId]);
  
  return <div>{childData?.name}</div>;
}

Solution: Parallel Data Fetching

// ✅ GOOD: Fetch in parallel at top level
function ParentComponent() {
  const { parentData, childData, isLoading } = useParallelData();
  
  if (isLoading) return <Loading />;
  
  return (
    <div>
      <ParentView data={parentData} />
      <ChildView data={childData} />
    </div>
  );
}

function useParallelData() {
  const [data, setData] = useState({ parentData: null, childData: null });
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    Promise.all([fetchParentData(), fetchChildData()])
      .then(([parentData, childData]) => {
        setData({ parentData, childData });
        setIsLoading(false);
      });
  }, []);
  
  return { ...data, isLoading };
}

With React Query/TanStack Query

// ✅ BEST: React Query handles parallelization
function Dashboard() {
  const { data: user } = useQuery(['user'], fetchUser);
  const { data: tasks } = useQuery(['tasks'], fetchTasks);
  const { data: sessions } = useQuery(['sessions'], fetchSessions);
  
  // All three fetch in parallel automatically
  return <DashboardView user={user} tasks={tasks} sessions={sessions} />;
}

Critical: Bundle Size Optimization

Impact: CRITICAL - Directly affects load time.

Avoid Barrel Import Anti-Pattern

// ❌ BAD: Imports entire library
import { Button, Input, Select, Modal, ... } from '@/components';
// Even if you use 1 component, entire barrel file is loaded

// ✅ GOOD: Direct imports
import { Button } from '@/components/button';
import { Input } from '@/components/input';

Lazy Loading Components

import { lazy, Suspense } from 'react';

// ❌ BAD: Loads immediately
import { SettingsPanel } from './SettingsPanel';

// ✅ GOOD: Loads when needed
const SettingsPanel = lazy(() => import('./SettingsPanel'));

function App() {
  const [showSettings, setShowSettings] = useState(false);
  
  return (
    <div>
      <button onClick={() => setShowSettings(true)}>Settings</button>
      
      <Suspense fallback={<Loading />}>
        {showSettings && <SettingsPanel />}
      </Suspense>
    </div>
  );
}

Route-Based Code Splitting

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// Lazy load route components
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Sessions = lazy(() => import('./pages/Sessions'));
const Settings = lazy(() => import('./pages/Settings'));

function AppRoutes() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/sessions" element={<Sessions />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Dynamic Imports for Heavy Libraries

// ❌ BAD: Always loads heavy library
import { marked } from 'marked';
import hljs from 'highlight.js';

// ✅ GOOD: Load only when needed
async function renderMarkdown(content: string) {
  const [{ marked }, hljs] = await Promise.all([
    import('marked'),
    import('highlight.js'),
  ]);
  
  return marked(content, {
    highlight: (code, lang) => hljs.highlight(code, { language: lang }).value,
  });
}

High: Prevent Unnecessary Re-renders

Impact: HIGH - Common cause of sluggish UIs.

Identify Re-renders

// Add to component temporarily
useEffect(() => {
  console.log('Component re-rendered');
});

// Or use React DevTools Profiler
// Components > Settings > Highlight updates when components render

Stable References with useCallback

// ❌ BAD: New function every render
function TaskList({ tasks }: { tasks: Task[] }) {
  const handleComplete = (id: string) => {  // Creates new function each render
    completeTask(id);
  };
  
  return tasks.map(task => (
    <TaskItem key={task.id} task={task} onComplete={handleComplete} />
  ));
}

// ✅ GOOD: Stable function reference
function TaskList({ tasks }: { tasks: Task[] }) {
  const handleComplete = useCallback((id: string) => {
    completeTask(id);
  }, []);  // Empty deps = stable reference
  
  return tasks.map(task => (
    <TaskItem key={task.id} task={task} onComplete={handleComplete} />
  ));
}

Memoize Expensive Computations

// ❌ BAD: Recalculates on every render
function TaskStats({ tasks }: { tasks: Task[] }) {
  const stats = {
    total: tasks.length,
    completed: tasks.filter(t => t.status === 'completed').length,
    pending: tasks.filter(t => t.status === 'pending').length,
    avgPriority: tasks.reduce((sum, t) => sum + t.priority, 0) / tasks.length,
  };
  
  return <StatsDisplay stats={stats} />;
}

// ✅ GOOD: Memoized calculation
function TaskStats({ tasks }: { tasks: Task[] }) {
  const stats = useMemo(() => ({
    total: tasks.length,
    completed: tasks.filter(t => t.status === 'completed').length,
    pending: tasks.filter(t => t.status === 'pending').length,
    avgPriority: tasks.reduce((sum, t) => sum + t.priority, 0) / tasks.length,
  }), [tasks]);  // Only recalculate when tasks change
  
  return <StatsDisplay stats={stats} />;
}

Memoize Components

// ❌ BAD: Re-renders even when props haven't changed
function TaskItem({ task, onComplete }: TaskItemProps) {
  return (
    <div className="task-item">
      <span>{task.title}</span>
      <button onClick={() => onComplete(task.id)}>Complete</button>
    </div>
  );
}

// ✅ GOOD: Only re-renders when props change
const TaskItem = memo(function TaskItem({ task, onComplete }: TaskItemProps) {
  return (
    <div className="task-item">
      <span>{task.title}</span>
      <button onClick={() => onComplete(task.id)}>Complete</button>
    </div>
  );
});

Avoid Object/Array Literals in JSX

// ❌ BAD: Creates new object every render
function Component() {
  return (
    <Child 
      style={{ padding: 10, margin: 5 }}  // New object each render!
      items={['a', 'b', 'c']}  // New array each render!
    />
  );
}

// ✅ GOOD: Stable references
const containerStyle = { padding: 10, margin: 5 };
const defaultItems = ['a', 'b', 'c'];

function Component() {
  return (
    <Child 
      style={containerStyle}
      items={defaultItems}
    />
  );
}

// Or with useMemo for dynamic values
function Component({ padding }: { padding: number }) {
  const style = useMemo(() => ({ padding, margin: 5 }), [padding]);
  return <Child style={style} />;
}

Medium: Efficient State Management

Avoid State Lifting Anti-Pattern

// ❌ BAD: State too high, causes unnecessary re-renders
function App() {
  const [searchTerm, setSearchTerm] = useState('');  // Re-renders entire app
  
  return (
    <div>
      <Header />  {/* Re-renders on every keystroke! */}
      <SearchInput value={searchTerm} onChange={setSearchTerm} />
      <SearchResults term={searchTerm} />
      <Footer />  {/* Re-renders on every keystroke! */}
    </div>
  );
}

// ✅ GOOD: Colocate state with consumers
function SearchSection() {
  const [searchTerm, setSearchTerm] = useState('');  // Isolated
  
  return (
    <div>
      <SearchInput value={searchTerm} onChange={setSearchTerm} />
      <SearchResults term={searchTerm} />
    </div>
  );
}

function App() {
  return (
    <div>
      <Header />  {/* Won't re-render */}
      <SearchSection />
      <Footer />  {/* Won't re-render */}
    </div>
  );
}

Use Jotai for Atomic State

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';

// Split atoms for granular updates
const tasksAtom = atom<Task[]>([]);
const selectedTaskIdAtom = atom<string | null>(null);

// Derived atom - only updates when dependencies change
const selectedTaskAtom = atom((get) => {
  const tasks = get(tasksAtom);
  const selectedId = get(selectedTaskIdAtom);
  return tasks.find(t => t.id === selectedId);
});

// Components subscribe to specific atoms
function TaskList() {
  const tasks = useAtomValue(tasksAtom);  // Only re-renders on tasks change
  return tasks.map(task => <TaskItem key={task.id} task={task} />);
}

function TaskDetails() {
  const task = useAtomValue(selectedTaskAtom);  // Only re-renders when selected task changes
  return task ? <TaskView task={task} /> : null;
}

Medium: Virtualized Lists

For long lists (100+ items), render only visible items:

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualizedTaskList({ tasks }: { tasks: Task[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  
  const virtualizer = useVirtualizer({
    count: tasks.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,  // Estimated row height
  });
  
  return (
    <div ref={parentRef} className="h-[400px] overflow-auto">
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: 0,
              transform: `translateY(${virtualRow.start}px)`,
              height: `${virtualRow.size}px`,
            }}
          >
            <TaskItem task={tasks[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

Performance Debugging

React DevTools Profiler

1. Open React DevTools > Profiler tab
2. Click Record
3. Perform the slow action
4. Click Stop
5. Analyze:
   • Which components re-rendered?
   • How long did renders take?
   • What triggered the render?

Common Performance Issues

Symptom	Likely Cause	Solution
Entire app re-renders	State too high	Colocate state, use context selectors
List sluggish	Too many DOM nodes	Virtualize list
Slow initial load	Large bundle	Code split, lazy load
Input lag	Expensive computation in render	useMemo, debounce
Scroll jank	Layout thrashing	Use transform, virtual scroll

Performance Checklist

Before Optimizing

• Measured actual performance issue (don't optimize prematurely)
• Used React DevTools Profiler
• Identified specific slow component/interaction

Common Optimizations

• No fetch waterfalls (parallel fetching)
• Routes are lazy loaded
• Heavy libraries dynamically imported
• Lists with 50+ items virtualized
• Expensive calculations wrapped in useMemo
• Callbacks passed to children wrapped in useCallback
• Frequently re-rendering components wrapped in memo
• No object/array literals in JSX props
• State colocated with consumers