React Performance — memo, useMemo, useCallback

React provides tools to prevent unnecessary re-renders and optimize performance.

React Performance — memo, useMemo, useCallback
React.memo
useMemo
useCallback
When to Use
Anti-patterns
Real-World: Optimized List
FAQ

React.memo

Memoize components:

const UserCard = React.memo(function({ user }: { user: User }) {
  return <div>{user.name}</div>
})

Prevents re-render if props haven't changed.

useMemo

Memoize values:

const memoizedValue = useMemo(() => {
  return expensiveCalculation(a, b)
}, [a, b])

useCallback

Memoize functions:

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

When to Use

Use optimization when:

Component renders slowly
Component rerenders frequently
Props contain complex objects/arrays

Anti-patterns

Don't overuse memoization:

// WRONG - unnecessary memo
const Component = React.memo(function({ simple }: { simple: string }) {
  return <div>{simple}</div>
})

// WRONG - useMemo for simple values
const value = useMemo(() => simple, [simple])

Real-World: Optimized List

const ListItem = React.memo(function({ item, onSelect }: ListItemProps) {
  return <button onClick={onSelect}>{item.name}</button>
})

function ItemList({ items }) {
  const [selected, setSelected] = useState(null)

  const handleSelect = useCallback((id) => {
    setSelected(id)
  }, [])

  const filteredItems = useMemo(() => {
    return items.filter(i => i.available)
  }, [items])

  return (
    <div>
      {filteredItems.map(item => (
        <ListItem
          key={item.id}
          item={item}
          onSelect={() => handleSelect(item.id)}
        />
      ))}
    </div>
  )
}

FAQ

Q: Is React slow by default? A: No, React is fast. Optimize only when needed.

Q: Should I memo all components? A: No, only memo components that are expensive to render.

Q: Does useMemo improve performance? A: Only if the computation is expensive. Use Profiler to measure.

Strategic optimization significantly improves React app performance.