memo, useMemo, useCallback
Go deep on memo, useMemo, useCallback: edge cases, scalability limits, and how you'd evolve the solution over 2 years.
Answers use simple, clear English.
Quick interview answer
React.memo skips re-render if props shallow-equal. useMemo caches computed value; useCallback caches function reference — helps memoized children avoid redundant renders.
Detailed answer
React.memo skips re-render if props shallow-equal. useMemo caches computed value; useCallback caches function reference — helps memoized children avoid redundant renders. Scale limits often appear in: Premature optimization — memo has comparison cost; stale closures if deps wrong.. Evolution levers: Profile first; memo leaf components receiving stable props from unstable parents.. Anchor example: Heavy DataGrid row component wrapped in memo; stable onSort callback via useCallback. 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: Architect.
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
Only answered follow-ups are shown — click to open with full answers