Memo can skip rendering when props compare equal. Its value depends on render cost and whether unchanged inputs retain meaningful identity.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: A memoized row receiving a newly created options object may still render on every parent update. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Locate expensive work
Profile the actual interaction and identify a costly child whose meaningful inputs often remain unchanged.
Step 2: Inspect changed identities
A new options object or function counts as a changed prop even when its meaning matches the previous render.
Step 3: Stabilize useful inputs
Move fixed values outside rendering or memoize dependent values appropriately. Keep memo as an optimization, never a correctness requirement.
Worked scenario
A memoized row receiving a newly created options object may still render on every parent update.
A memoized row receiving options={{ compact: true }} gets a new object on every parent render. Passing a stable shared options constant removes that particular prop change. If the row’s item genuinely changed, rendering it is appropriate; suppressing that change with an incorrect comparator would hide new data.
Common mistake
Memoization cannot fix impure rendering or wrong state ownership.
Verify the behavior
Compare profiler traces before and after stabilization. Change a real row field and ensure the optimized row still updates correctly.
Interview exercise
Choose a useful optimization.
Answer and reasoning
Profile the interaction, isolate expensive work and stabilize the prop that changes only by reference when its meaning is unchanged.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.