memo, useMemo, useCallback
Design a small subsystem that relies on memo, useMemo, useCallback. Outline components, data flow, failure modes, and metrics.
Answers use simple, clear English.
Quick interview answer
Use memo, useMemo, useCallback as the core idea. Example shape: Heavy DataGrid row component wrapped in memo; stable onSort callback via useCallback..
Detailed answer
Use memo, useMemo, useCallback as the core idea. Example shape: Heavy DataGrid row component wrapped in memo; stable onSort callback via useCallback.. Watch for: Premature optimization — memo has comparison cost; stale closures if deps wrong.. Measure success via latency/error/saturation. 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
Open one as its own read / solve / listen card