React.memo and Performance Optimization

React re-renders can slow down applications. Here's how to optimize with memoization.

Understanding Re-renders#

// Parent re-render causes child re-render
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      {/* ExpensiveChild re-renders even though props haven't changed */}
      <ExpensiveChild name="John" />
    </div>
  );
}

function ExpensiveChild({ name }: { name: string }) {
  console.log('ExpensiveChild rendered');
  // Expensive computation or complex UI
  return <div>Hello, {name}</div>;
}

React.memo Basics#

// Wrap component to prevent unnecessary re-renders
const ExpensiveChild = React.memo(function ExpensiveChild({
  name
}: {
  name: string
}) {
  console.log('ExpensiveChild rendered');
  return <div>Hello, {name}</div>;
});

// Now only re-renders when props change

// With custom comparison
const MemoizedComponent = React.memo(
  function MyComponent({ user, settings }) {
    return (
      <div>
        <span>{user.name}</span>
        <span>{settings.theme}</span>
      </div>
    );
  },
  (prevProps, nextProps) => {
    // Return true if props are equal (skip re-render)
    return (
      prevProps.user.id === nextProps.user.id &&
      prevProps.settings.theme === nextProps.settings.theme
    );
  }
);

useCallback for Functions#

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

  // Without useCallback: new function every render
  const handleClick = () => {
    console.log('clicked');
  };

  // With useCallback: same function reference
  const memoizedHandleClick = useCallback(() => {
    console.log('clicked');
  }, []); // Empty deps = never changes

  // With dependencies
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []); // setCount is stable

  const handleSubmit = useCallback((data: FormData) => {
    submitForm(data, count);
  }, [count]); // Re-create when count changes

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      {/* MemoizedChild won't re-render */}
      <MemoizedChild onClick={memoizedHandleClick} />
    </div>
  );
}

const MemoizedChild = React.memo(function Child({
  onClick
}: {
  onClick: () => void
}) {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

useMemo for Values#

function ExpensiveComponent({ items, filter }: Props) {
  // Without useMemo: recalculates every render
  const filteredItems = items.filter(item =>
    item.name.includes(filter)
  );

  // With useMemo: only recalculates when deps change
  const memoizedItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]);

  // Expensive computation
  const statistics = useMemo(() => {
    console.log('Computing statistics...');
    return {
      total: items.length,
      average: items.reduce((a, b) => a + b.value, 0) / items.length,
      max: Math.max(...items.map(i => i.value)),
    };
  }, [items]);

  // Memoized object to prevent child re-renders
  const config = useMemo(() => ({
    theme: 'dark',
    size: 'large',
  }), []); // Never changes

  return (
    <div>
      <Stats data={statistics} />
      <List items={memoizedItems} config={config} />
    </div>
  );
}

Common Patterns#

// Pattern 1: Memoized Context Value
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState('light');

  // Memoize context value
  const value = useMemo(() => ({
    theme,
    setTheme,
    isDark: theme === 'dark',
  }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// Pattern 2: Callback with Refs
function SearchInput({ onSearch }: { onSearch: (query: string) => void }) {
  const [query, setQuery] = useState('');
  const onSearchRef = useRef(onSearch);

  // Update ref without re-creating callback
  useEffect(() => {
    onSearchRef.current = onSearch;
  }, [onSearch]);

  const handleSearch = useCallback(() => {
    onSearchRef.current(query);
  }, [query]); // Only depends on query

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      onKeyDown={e => e.key === 'Enter' && handleSearch()}
    />
  );
}

// Pattern 3: Derived State
function UserList({ users }: { users: User[] }) {
  const [sortKey, setSortKey] = useState<keyof User>('name');
  const [filterActive, setFilterActive] = useState(false);

  // Compose memoized operations
  const activeUsers = useMemo(
    () => filterActive ? users.filter(u => u.isActive) : users,
    [users, filterActive]
  );

  const sortedUsers = useMemo(
    () => [...activeUsers].sort((a, b) =>
      String(a[sortKey]).localeCompare(String(b[sortKey]))
    ),
    [activeUsers, sortKey]
  );

  return (
    <div>
      <select onChange={e => setSortKey(e.target.value as keyof User)}>
        <option value="name">Name</option>
        <option value="email">Email</option>
      </select>
      <UserTable users={sortedUsers} />
    </div>
  );
}

Component Composition#

// Pattern: Move state down
// Bad: Entire component re-renders
function App() {
  const [search, setSearch] = useState('');

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <ExpensiveTree />
    </div>
  );
}

// Good: Only SearchInput re-renders
function App() {
  return (
    <div>
      <SearchInput />
      <ExpensiveTree />
    </div>
  );
}

function SearchInput() {
  const [search, setSearch] = useState('');
  return <input value={search} onChange={e => setSearch(e.target.value)} />;
}

// Pattern: Lift content up
// Bad: ColorPicker changes cause ExpensiveTree re-render
function App() {
  return (
    <ColorProvider>
      <ExpensiveTree />
    </ColorProvider>
  );
}

function ColorProvider({ children }) {
  const [color, setColor] = useState('blue');

  return (
    <div style={{ color }}>
      <input value={color} onChange={e => setColor(e.target.value)} />
      {children} {/* children don't re-render */}
    </div>
  );
}

Virtualization#

import { FixedSizeList } from 'react-window';

// Virtualize long lists
function VirtualizedList({ items }: { items: Item[] }) {
  const Row = useCallback(({ index, style }: { index: number; style: React.CSSProperties }) => (
    <div style={style}>
      <ItemRow item={items[index]} />
    </div>
  ), [items]);

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

// With memoized rows
const ItemRow = React.memo(function ItemRow({ item }: { item: Item }) {
  return (
    <div className="item-row">
      <span>{item.name}</span>
      <span>{item.value}</span>
    </div>
  );
});

Profiling Performance#

// Use React DevTools Profiler

// Add Profiler component
import { Profiler } from 'react';

function App() {
  const onRenderCallback = (
    id: string,
    phase: 'mount' | 'update',
    actualDuration: number,
    baseDuration: number,
    startTime: number,
    commitTime: number
  ) => {
    console.log({
      id,
      phase,
      actualDuration,
      baseDuration,
    });
  };

  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <ExpensiveComponent />
    </Profiler>
  );
}

// Why did you render (development tool)
// npm install @welldone-software/why-did-you-render
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

// Mark specific components
MyComponent.whyDidYouRender = true;

When NOT to Memoize#

// Don't memoize cheap operations
// Bad: useMemo overhead > computation cost
const doubled = useMemo(() => count * 2, [count]);
// Good: Just compute it
const doubled = count * 2;

// Don't memoize when props always change
// Bad: New object every render anyway
function Parent() {
  const [items, setItems] = useState([]);

  // user is new object every render
  const user = { name: 'John', items };

  // Memoization is useless here
  return <MemoizedChild user={user} />;
}

// Good: Memoize the object too
function Parent() {
  const [items, setItems] = useState([]);

  const user = useMemo(() => ({
    name: 'John',
    items
  }), [items]);

  return <MemoizedChild user={user} />;
}

// Don't wrap everything in memo
// Bad: Premature optimization
const Button = React.memo(({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
));

// Good: Only memoize when there's a measured problem

Advanced Patterns#

// Selector pattern for context
const UserContext = createContext<User[]>([]);

function useUser(id: string) {
  const users = useContext(UserContext);

  // Only re-render when this specific user changes
  return useMemo(
    () => users.find(u => u.id === id),
    [users, id]
  );
}

// Split context to reduce re-renders
const UserDataContext = createContext<User | null>(null);
const UserActionsContext = createContext<UserActions | null>(null);

function UserProvider({ children }) {
  const [user, setUser] = useState<User | null>(null);

  // Actions never change
  const actions = useMemo(() => ({
    login: async (credentials) => { /* ... */ },
    logout: () => setUser(null),
  }), []);

  return (
    <UserDataContext.Provider value={user}>
      <UserActionsContext.Provider value={actions}>
        {children}
      </UserActionsContext.Provider>
    </UserDataContext.Provider>
  );
}

// Stable callback with useEvent (React 18+)
// Note: useEvent is experimental
function Chat({ roomId }) {
  const [message, setMessage] = useState('');

  // Always reads latest message without re-creating
  const onSend = useEvent(() => {
    sendMessage(roomId, message);
  });

  return <SendButton onClick={onSend} />;
}

Best Practices#

When to Use:
✓ Expensive computations
✓ Components with many children
✓ Callbacks passed to memoized children
✓ Context values
✓ Virtualized lists

When to Skip:
✓ Simple/cheap operations
✓ Props that always change
✓ Components that rarely re-render
✓ Small component trees

Debugging:
✓ Use React DevTools Profiler
✓ Add console.logs to track renders
✓ Use why-did-you-render in development
✓ Measure before optimizing

Patterns:
✓ Move state down
✓ Lift content up
✓ Split contexts
✓ Use refs for callbacks

React.memo, useMemo, and useCallback prevent unnecessary re-renders when used correctly. Profile first to identify actual performance issues, then apply memoization strategically. Over-optimization adds complexity without benefits. Focus on component composition patterns and virtualization for the biggest performance gains.