React.memo, useMemo, useCallback — In Practice
Use React.memo to skip child re-renders, useMemo for derived values, and useCallback for stable handler identities.
What each tool does
Goal: Use three tools:
- React.memo — skip child re-render if props are equal
- useMemo — memoize derived values
- useCallback — stable function props
When it helps
Use when:
- Child is expensive or often unchanged
- Derived data is heavy or stable
- Handlers are passed to memoized children
Profile before over-optimizing.
All lessons in this course
- Re-renders vs Commits: When to Optimize
- React.memo, useMemo, useCallback — In Practice
- Derived State & Avoiding Extra Renders