Learn the concept

Performance Optimization

react

senior

performance

Explain React.memo, useMemo, and useCallback. When should each be used?

memo

useMemo

useCallback

performance

optimization

react-compiler

Quick Answer

React.memo prevents component re-renders when props are unchanged. useMemo caches computed values. useCallback caches function references. Use them only when you have measured performance issues - premature optimization adds complexity without benefit.

Detailed Explanation

React.memo:

HOC that memoizes component output
Shallow compares props
Prevents re-render if props haven't changed
Can provide custom comparison function

useMemo:

Caches expensive computed values
Re-computes only when dependencies change
Returns the memoized value

useCallback:

Caches function references
Re-creates only when dependencies change
Returns the memoized function
Primarily useful when passing to memoized children

When to Use:

✅ Expensive calculations (useMemo)
✅ Referential equality needed for effects
✅ Child components are memoized and receive callbacks
❌ Simple components without performance issues
❌ Functions not passed as props

React Compiler (v1.0, October 2025):

Automatically memoizes components, values, and callbacks at compile time
Eliminates the need for manual React.memo, useMemo, and useCallback in most cases
Enabled in Next.js 16 via reactCompiler: true in next.config
Manual memoization remains available as an escape hatch for edge cases
The compiler analyzes your code and inserts memoization where beneficial

Code Examples

React.memo usageJSX

// Memoized component - only re-renders if props change
const ExpensiveList = React.memo(function ExpensiveList({ items, onItemClick }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onItemClick(item)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

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

Real-World Applications

Use Cases

Data Visualization Dashboards

Memoizing expensive chart rendering when only filters change, not the underlying data

Real-Time Collaboration

Preventing unnecessary re-renders in collaborative editors when remote cursors move

Large Form Performance

Memoizing form sections so typing in one field doesn't re-render the entire form

Mini Projects

Render Tracker

intermediate

Build a component that visually highlights re-renders and shows which memoization techniques prevent them

React Compiler Migration

advanced

Take an app heavily using manual memoization and remove unnecessary useMemo/useCallback after enabling React Compiler

Industry Examples

Figma

Uses targeted memoization for their real-time collaborative design canvas

Resources

Related Questions

How does React's reconciliation algorithm work?

senior

internals

How does list virtualization (windowing) work in React and when should you use it?

senior

performance

How does React's reconciliation algorithm work?

Detailed Explanation

React.memo:

HOC that memoizes component output
Shallow compares props
Prevents re-render if props haven't changed
Can provide custom comparison function

useMemo:

Caches expensive computed values
Re-computes only when dependencies change
Returns the memoized value

useCallback:

Caches function references
Re-creates only when dependencies change
Returns the memoized function
Primarily useful when passing to memoized children

When to Use:

✅ Expensive calculations (useMemo)
✅ Referential equality needed for effects
✅ Child components are memoized and receive callbacks
❌ Simple components without performance issues
❌ Functions not passed as props

React Compiler (v1.0, October 2025):

Automatically memoizes components, values, and callbacks at compile time
Eliminates the need for manual React.memo, useMemo, and useCallback in most cases
Enabled in Next.js 16 via reactCompiler: true in next.config
Manual memoization remains available as an escape hatch for edge cases
The compiler analyzes your code and inserts memoization where beneficial

Code Examples

React.memo usageJSX

// Memoized component - only re-renders if props change
const ExpensiveList = React.memo(function ExpensiveList({ items, onItemClick }) {
  console.log('ExpensiveList rendered');
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onItemClick(item)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

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

Real-World Applications

Use Cases

Data Visualization Dashboards

Memoizing expensive chart rendering when only filters change, not the underlying data

Real-Time Collaboration

Preventing unnecessary re-renders in collaborative editors when remote cursors move

Large Form Performance

Memoizing form sections so typing in one field doesn't re-render the entire form

Mini Projects

Render Tracker

intermediate

Build a component that visually highlights re-renders and shows which memoization techniques prevent them

React Compiler Migration

advanced

Take an app heavily using manual memoization and remove unnecessary useMemo/useCallback after enabling React Compiler

Industry Examples

Figma

Uses targeted memoization for their real-time collaborative design canvas

Explain React.memo, useMemo, and useCallback. When should each be used?

Detailed Explanation

Code Examples

Real-World Applications

Data Visualization Dashboards

Real-Time Collaboration

Large Form Performance

Render Tracker

React Compiler Migration

Meta

Figma

Resources

React Docs - useMemo

React Docs - useCallback

When to useMemo and useCallback

React Compiler v1.0

Related Questions

Explain React.memo, useMemo, and useCallback. When should each be used?

Detailed Explanation

Code Examples

Real-World Applications

Data Visualization Dashboards

Real-Time Collaboration

Large Form Performance

Render Tracker

React Compiler Migration

Meta

Figma

Resources

React Docs - useMemo

React Docs - useCallback

When to useMemo and useCallback

React Compiler v1.0

Related Questions