React · Performance Optimization

Optimization Best Practices

Master React performance optimization with proven techniques and patterns. Learn when and how to optimize, avoid common pitfalls, and build lightning-fast applications.

Find videos you like?

Save to resource drawer for future reference!

Performance Optimization Philosophy

Measure first, optimize second

Performance optimization is about making smart decisions based on measurements, not assumptions. Always profile before optimizing, and focus on the bottlenecks that actually impact user experience.

Golden Rule

Premature optimization is the root of all evil. Don't optimize until you've measured and identified real performance problems. Most React apps are fast enough without optimization!

Measure First

Use React DevTools Profiler to identify actual bottlenecks.

Focus on Impact

Optimize the 20% that causes 80% of performance issues.

Keep it Simple

Clean, simple code is often faster than over-optimized code.

Core Optimization Techniques

Essential patterns for better performance

React.memo

Prevent Unnecessary Re-renders

Wrap components in React.memo to skip re-rendering when props haven't changed.

const MemoizedComponent = React.memo(MyComponent);

// Only re-renders when props change

💡 Use when: Component renders often with same props, or renders are expensive

useMemo

Memoize Expensive Calculations

Cache computed values so they're not recalculated on every render.

const sortedList = useMemo(() => {

return items.sort((a, b) => a.value - b.value);

}, [items]);

💡 Use when: Calculation is expensive (filtering/sorting large arrays, complex math)

useCallback

Memoize Functions

Prevent creating new function instances on every render.

const handleClick = useCallback(() => {

doSomething(id);

}, [id]);

💡 Use when: Passing callbacks to memoized child components

Code Splitting & Lazy Loading

Reduce initial bundle size

Lazy Loading Components

javascript

Load components only when needed

import React, { lazy, Suspense } from 'react';

// Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminPanel = lazy(() => import('./AdminPanel'));

function Dashboard() {
  const [showChart, setShowChart] = React.useState(false);
  
  return (
    <div>
      <h1>Dashboard</h1>
      
      <button onClick={() => setShowChart(true)}>
        Show Chart
      </button>
      
      {showChart && (
        <Suspense fallback={<div>Loading chart...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

// Route-based code splitting
import { lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Console Output

// Initial bundle: 150KB

// After lazy loading: 50KB initial, 100KB on demand

// ✅ 66% reduction in initial load!

// Loading sequence:

❯> User visits site → Loads 50KB

❯> User clicks "Show Chart" → Loads 30KB

❯> User navigates to Dashboard → Loads 70KB

// ✨ Much faster initial page load!

List Rendering Optimization

Handle large lists efficiently

Virtualized Lists

javascript

Render only visible items in large lists

import { FixedSizeList } from 'react-window';

// ❌ BAD: Renders all 10,000 items
function SlowList({ items }) {
  return (
    <div>
      {items.map(item => (
        <div key={item.id} style={{ height: 50 }}>
          {item.name}
        </div>
      ))}
    </div>
  );
}

// ✅ GOOD: Only renders visible items
function FastList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

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

// Key prop optimization
// ❌ BAD: Using array index
items.map((item, index) => <Item key={index} {...item} />)

// ✅ GOOD: Using stable ID
items.map(item => <Item key={item.id} {...item} />)

// Pagination for very large datasets
function PaginatedList({ items, pageSize = 20 }) {
  const [page, setPage] = React.useState(0);
  
  const visibleItems = React.useMemo(() => {
    const start = page * pageSize;
    return items.slice(start, start + pageSize);
  }, [items, page, pageSize]);
  
  return (
    <div>
      {visibleItems.map(item => (
        <Item key={item.id} {...item} />
      ))}
      <button onClick={() => setPage(p => p + 1)}>
        Next Page
      </button>
    </div>
  );
}

Console Output

// Without virtualization:

❯> 10,000 items × 50px = 500,000px DOM

❯> Initial render: 3.2s

❯> Memory: 180MB

❯> ❌ Very slow scrolling

// With virtualization (react-window):

❯> Only 12 visible items in DOM

❯> Initial render: 45ms

❯> Memory: 8MB

❯> ✅ Buttery smooth scrolling!

State Management Optimization

Optimize state updates and re-renders

Smart State Placement

javascript

Keep state close to where it's used

// ❌ BAD: State too high up causes unnecessary re-renders
function App() {
  const [theme, setTheme] = useState('light');
  const [userName, setUserName] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  
  return (
    <div>
      <Header theme={theme} /> {/* Re-renders on ANY state change */}
      <SearchBox query={searchQuery} onChange={setSearchQuery} />
      <UserProfile name={userName} onChange={setUserName} />
      <Footer theme={theme} />
    </div>
  );
}

// ✅ GOOD: State collocated with usage
function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <div>
      <Header theme={theme} />
      <SearchBox /> {/* Manages own state */}
      <UserProfile /> {/* Manages own state */}
      <Footer theme={theme} />
    </div>
  );
}

function SearchBox() {
  const [query, setQuery] = useState(''); // Local state
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// Context optimization with split providers
// ❌ BAD: Single context causes all consumers to re-render
const AppContext = createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [settings, setSettings] = useState({});
  
  return (
    <AppContext.Provider value={{ user, theme, settings, setUser, setTheme, setSettings }}>
      {children}
    </AppContext.Provider>
  );
}

// ✅ GOOD: Split contexts by concern
const UserContext = createContext();
const ThemeContext = createContext();
const SettingsContext = createContext();

// Only components using theme re-render when theme changes!

Console Output

// Bad state placement:

❯> Theme changes → All 4 components re-render

❯> Search changes → All 4 components re-render

❯> User changes → All 4 components re-render

❯> Total re-renders: 12

// Good state placement:

❯> Theme changes → Only Header & Footer re-render

❯> Search changes → Only SearchBox re-renders

❯> User changes → Only UserProfile re-renders

❯> Total re-renders: 4

// ✅ 66% fewer re-renders!

Asset Optimization

Optimize images, fonts, and other assets

Image Optimization

Use modern formats (WebP, AVIF) with fallbacks
Lazy load images below the fold with loading="lazy"
Use responsive images with srcSet
Compress images (aim for under 100KB per image)
Use CDN for faster delivery

Bundle Size

Use tree-shaking (import only what you need)
Replace heavy libraries with lighter alternatives
Remove unused dependencies
Analyze bundle with webpack-bundle-analyzer
Enable gzip/brotli compression

Common Performance Mistakes

Avoid these pitfalls

❌ Creating Objects/Arrays in Render

New object/array references cause unnecessary re-renders.

// ❌ BAD: New array every render

// ✅ GOOD: Stable reference

const emptyArray = [];

❌ Inline Functions in Props

New function instances break memoization.

// ❌ BAD: New function every render

<Button onClick={() => doSomething()} />

// ✅ GOOD: Memoized callback

const handleClick = useCallback(() => doSomething(), []);

❌ Over-Using Context

Context updates re-render ALL consumers, even if they don't use changed values.

// ❌ BAD: Everything in one context

<AppContext.Provider value={{ user, theme, settings }} />

// ✅ GOOD: Split by concern

❌ Not Using Keys in Lists

Missing or unstable keys cause React to recreate DOM nodes unnecessarily.

// ❌ BAD: No key or using index

items.map((item, i) => <div key={i}>{item}</div>)

// ✅ GOOD: Stable unique ID

items.map(item => <div key={item.id}>{item}</div>)

Performance Optimization Checklist

Step-by-step optimization guide

Profile with React DevTools

Identify which components are slow and re-rendering frequently

Optimize Re-renders

Use React.memo, useMemo, and useCallback where measurements show benefit

Implement Code Splitting

Use React.lazy for routes and heavy components

Optimize Large Lists

Implement virtualization for lists with 100+ items

Optimize Assets

Compress images, use modern formats, lazy load below fold

Reduce Bundle Size

Tree-shake, analyze bundle, replace heavy dependencies

Measure Again

Profile after changes to verify improvements

Key Takeaways

Measure First

Always profile before optimizing. Don't guess where bottlenecks are!

React.memo

Prevent unnecessary re-renders of expensive components.

Code Splitting

Use React.lazy to reduce initial bundle size significantly.

State Placement

Keep state close to where it's used to minimize re-renders.

Optimize Assets

Compress images, use modern formats, lazy load below fold.

Keep it Simple

Don't over-optimize. Clean code is often fast enough!

Build Fast, Stay Fast!

Remember: Most React apps are fast enough without optimization. Only optimize when you've measured a real performance problem. Focus on clean, maintainable code first, and optimize later if needed. Your users will thank you for the great experience! 🚀

Previous Topic

Profiling Performance

Use React DevTools Profiler, identify bottlenecks, measure render performance, and optimization strategies.

Next Topic

Testing Overview

Introduction to React testing, Jest, React Testing Library, and testing philosophy.

Ask a Question

Have a question about Optimization Best Practices? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Performance Optimization

Optimization Best Practices

Master React performance optimization with proven techniques and patterns. Learn when and how to optimize, avoid common pitfalls, and build lightning-fast applications.

Find videos you like?

Save to resource drawer for future reference!

Performance Optimization Philosophy

Measure first, optimize second

Performance optimization is about making smart decisions based on measurements, not assumptions. Always profile before optimizing, and focus on the bottlenecks that actually impact user experience.

Golden Rule

Premature optimization is the root of all evil. Don't optimize until you've measured and identified real performance problems. Most React apps are fast enough without optimization!

Measure First

Use React DevTools Profiler to identify actual bottlenecks.

Focus on Impact

Optimize the 20% that causes 80% of performance issues.

Keep it Simple

Clean, simple code is often faster than over-optimized code.

Core Optimization Techniques

Essential patterns for better performance

React.memo

Prevent Unnecessary Re-renders

Wrap components in React.memo to skip re-rendering when props haven't changed.

const MemoizedComponent = React.memo(MyComponent);

// Only re-renders when props change

💡 Use when: Component renders often with same props, or renders are expensive

useMemo

Memoize Expensive Calculations

Cache computed values so they're not recalculated on every render.

const sortedList = useMemo(() => {

return items.sort((a, b) => a.value - b.value);

}, [items]);

💡 Use when: Calculation is expensive (filtering/sorting large arrays, complex math)

useCallback

Memoize Functions

Prevent creating new function instances on every render.

const handleClick = useCallback(() => {

doSomething(id);

}, [id]);

💡 Use when: Passing callbacks to memoized child components

Code Splitting & Lazy Loading

Reduce initial bundle size

Lazy Loading Components

javascript

Load components only when needed

import React, { lazy, Suspense } from 'react';

// Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminPanel = lazy(() => import('./AdminPanel'));

function Dashboard() {
  const [showChart, setShowChart] = React.useState(false);
  
  return (
    <div>
      <h1>Dashboard</h1>
      
      <button onClick={() => setShowChart(true)}>
        Show Chart
      </button>
      
      {showChart && (
        <Suspense fallback={<div>Loading chart...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

// Route-based code splitting
import { lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Console Output

// Initial bundle: 150KB

// After lazy loading: 50KB initial, 100KB on demand

// ✅ 66% reduction in initial load!

// Loading sequence:

❯> User visits site → Loads 50KB

❯> User clicks "Show Chart" → Loads 30KB

❯> User navigates to Dashboard → Loads 70KB

// ✨ Much faster initial page load!

List Rendering Optimization

Handle large lists efficiently

Virtualized Lists

javascript

Render only visible items in large lists

import { FixedSizeList } from 'react-window';

// ❌ BAD: Renders all 10,000 items
function SlowList({ items }) {
  return (
    <div>
      {items.map(item => (
        <div key={item.id} style={{ height: 50 }}>
          {item.name}
        </div>
      ))}
    </div>
  );
}

// ✅ GOOD: Only renders visible items
function FastList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

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

// Key prop optimization
// ❌ BAD: Using array index
items.map((item, index) => <Item key={index} {...item} />)

// ✅ GOOD: Using stable ID
items.map(item => <Item key={item.id} {...item} />)

// Pagination for very large datasets
function PaginatedList({ items, pageSize = 20 }) {
  const [page, setPage] = React.useState(0);
  
  const visibleItems = React.useMemo(() => {
    const start = page * pageSize;
    return items.slice(start, start + pageSize);
  }, [items, page, pageSize]);
  
  return (
    <div>
      {visibleItems.map(item => (
        <Item key={item.id} {...item} />
      ))}
      <button onClick={() => setPage(p => p + 1)}>
        Next Page
      </button>
    </div>
  );
}

Console Output

// Without virtualization:

❯> 10,000 items × 50px = 500,000px DOM

❯> Initial render: 3.2s

❯> Memory: 180MB

❯> ❌ Very slow scrolling

// With virtualization (react-window):

❯> Only 12 visible items in DOM

❯> Initial render: 45ms

❯> Memory: 8MB

❯> ✅ Buttery smooth scrolling!

State Management Optimization

Optimize state updates and re-renders

Smart State Placement

javascript

Keep state close to where it's used

// ❌ BAD: State too high up causes unnecessary re-renders
function App() {
  const [theme, setTheme] = useState('light');
  const [userName, setUserName] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  
  return (
    <div>
      <Header theme={theme} /> {/* Re-renders on ANY state change */}
      <SearchBox query={searchQuery} onChange={setSearchQuery} />
      <UserProfile name={userName} onChange={setUserName} />
      <Footer theme={theme} />
    </div>
  );
}

// ✅ GOOD: State collocated with usage
function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <div>
      <Header theme={theme} />
      <SearchBox /> {/* Manages own state */}
      <UserProfile /> {/* Manages own state */}
      <Footer theme={theme} />
    </div>
  );
}

function SearchBox() {
  const [query, setQuery] = useState(''); // Local state
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// Context optimization with split providers
// ❌ BAD: Single context causes all consumers to re-render
const AppContext = createContext();

function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  const [settings, setSettings] = useState({});
  
  return (
    <AppContext.Provider value={{ user, theme, settings, setUser, setTheme, setSettings }}>
      {children}
    </AppContext.Provider>
  );
}

// ✅ GOOD: Split contexts by concern
const UserContext = createContext();
const ThemeContext = createContext();
const SettingsContext = createContext();

// Only components using theme re-render when theme changes!

Console Output

// Bad state placement:

❯> Theme changes → All 4 components re-render

❯> Search changes → All 4 components re-render

❯> User changes → All 4 components re-render

❯> Total re-renders: 12

// Good state placement:

❯> Theme changes → Only Header & Footer re-render

❯> Search changes → Only SearchBox re-renders

❯> User changes → Only UserProfile re-renders

❯> Total re-renders: 4

// ✅ 66% fewer re-renders!

Asset Optimization

Optimize images, fonts, and other assets

Image Optimization

Use modern formats (WebP, AVIF) with fallbacks
Lazy load images below the fold with loading="lazy"
Use responsive images with srcSet
Compress images (aim for under 100KB per image)
Use CDN for faster delivery

Bundle Size

Use tree-shaking (import only what you need)
Replace heavy libraries with lighter alternatives
Remove unused dependencies
Analyze bundle with webpack-bundle-analyzer
Enable gzip/brotli compression

Common Performance Mistakes

Avoid these pitfalls

❌ Creating Objects/Arrays in Render

New object/array references cause unnecessary re-renders.

// ❌ BAD: New array every render

// ✅ GOOD: Stable reference

const emptyArray = [];

❌ Inline Functions in Props

New function instances break memoization.

// ❌ BAD: New function every render

<Button onClick={() => doSomething()} />

// ✅ GOOD: Memoized callback

const handleClick = useCallback(() => doSomething(), []);

❌ Over-Using Context

Context updates re-render ALL consumers, even if they don't use changed values.

// ❌ BAD: Everything in one context

<AppContext.Provider value={{ user, theme, settings }} />

// ✅ GOOD: Split by concern

❌ Not Using Keys in Lists

Missing or unstable keys cause React to recreate DOM nodes unnecessarily.

// ❌ BAD: No key or using index

items.map((item, i) => <div key={i}>{item}</div>)

// ✅ GOOD: Stable unique ID

items.map(item => <div key={item.id}>{item}</div>)

Performance Optimization Checklist

Step-by-step optimization guide

Profile with React DevTools

Identify which components are slow and re-rendering frequently

Optimize Re-renders

Use React.memo, useMemo, and useCallback where measurements show benefit

Implement Code Splitting

Use React.lazy for routes and heavy components

Optimize Large Lists

Implement virtualization for lists with 100+ items

Optimize Assets

Compress images, use modern formats, lazy load below fold

Reduce Bundle Size

Tree-shake, analyze bundle, replace heavy dependencies

Measure Again

Profile after changes to verify improvements

Key Takeaways

Measure First

Always profile before optimizing. Don't guess where bottlenecks are!

React.memo

Prevent unnecessary re-renders of expensive components.

Code Splitting

Use React.lazy to reduce initial bundle size significantly.

State Placement

Keep state close to where it's used to minimize re-renders.

Optimize Assets

Compress images, use modern formats, lazy load below fold.

Keep it Simple

Don't over-optimize. Clean code is often fast enough!

Build Fast, Stay Fast!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Profiling Performance

Testing Overview

Building Your Learning Module...

Optimization Best Practices

Golden Rule

Measure First

Focus on Impact

Keep it Simple

Prevent Unnecessary Re-renders

Memoize Expensive Calculations

Memoize Functions

❌ Creating Objects/Arrays in Render

❌ Inline Functions in Props

❌ Over-Using Context

❌ Not Using Keys in Lists

Profile with React DevTools

Optimize Re-renders

Implement Code Splitting

Optimize Large Lists

Optimize Assets

Reduce Bundle Size

Measure Again

Measure First

React.memo

Code Splitting

State Placement

Optimize Assets

Keep it Simple

Build Fast, Stay Fast!

Profiling Performance

Testing Overview

Optimization Best Practices

Golden Rule

Measure First

Focus on Impact

Keep it Simple

Prevent Unnecessary Re-renders

Memoize Expensive Calculations

Memoize Functions

❌ Creating Objects/Arrays in Render

❌ Inline Functions in Props

❌ Over-Using Context

❌ Not Using Keys in Lists

Profile with React DevTools

Optimize Re-renders

Implement Code Splitting

Optimize Large Lists

Optimize Assets

Reduce Bundle Size

Measure Again

Measure First

React.memo

Code Splitting

State Placement

Optimize Assets

Keep it Simple

Build Fast, Stay Fast!