memo, useMemo, useCallback
As a Senior engineer, explain memo, useMemo, useCallback. What problem does it solve and how would you describe it in an interview?
Answers use simple, clear English.
Quick interview answer
At Senior depth: start with the problem, then mechanism, then a short example. React.memo skips re-render if props shallow-equal.
Detailed answer
At Senior depth: start with the problem, then mechanism, then a short example. React.memo skips re-render if props shallow-equal. useMemo caches computed value; useCallback caches function reference — helps memoized children avoid redundant renders. Core: React.memo skips re-render if props shallow-equal. useMemo caches computed value; useCallback caches function reference — helps memoized children avoid redundant renders. Real-time example: Heavy DataGrid row component wrapped in memo; stable onSort callback via useCallback. Pros: Targets expensive subtrees without manual shouldComponentUpdate. Cons: Premature optimization — memo has comparison cost; stale closures if deps wrong. Common mistakes: Memoizing everything; useCallback with empty deps capturing changing state. Best practices: Profile first; memo leaf components receiving stable props from unstable parents. Audience level: Senior.
Full explanation
React.memo skips re-render if props shallow-equal. useMemo caches computed value; useCallback caches function reference — helps memoized children avoid redundant renders.
Real example & use case
Heavy DataGrid row component wrapped in memo; stable onSort callback via useCallback.
Pros & cons
Pros: Targets expensive subtrees without manual shouldComponentUpdate. Cons: Premature optimization — memo has comparison cost; stale closures if deps wrong.
Common mistakes
Memoizing everything; useCallback with empty deps capturing changing state.
Best practices
Profile first; memo leaf components receiving stable props from unstable parents.
Follow-up questions
- How would you test memo, useMemo, useCallback?
- What metrics prove memo, useMemo, useCallback is healthy in prod?
- How does memo, useMemo, useCallback change at 10× traffic?