memo skips, until a new object arrives
When only the count changes, MemoCard is skipped. MemoStyled renders anyway: style={{ color: "teal" }} is a new object every time, so the shallow comparison fails.
memo(Component) makes React skip rendering a component when its parent re-renders with props that are shallowly equal to last time; it breaks when you pass new objects, arrays or functions on every render, and it's worth it only for components that are slow to render or render very often.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A <Chart data={data} /> is memoised but renders on every keystroke in a search box in the same parent. data is computed as const data = rows.map(toPoint). Fix it.
Write a memo comparator for <Avatar user={user} size={size} /> that skips rendering when the user's id and photoUrl and the size are unchanged.
Explain it without notes
What does memo do, exactly?
Why can a memo component still render on every parent render?
When would you write a custom comparator, and what are the risks?
How do you decide whether a component should be wrapped in memo?
Preview
Console
Nothing logged yet.Expected console output
App rendered
PlainCard rendered
MemoCard rendered
MemoStyled rendered (new style object)
--- count changes (name is the same)
App rendered
PlainCard rendered
MemoStyled rendered (new style object)
--- name changes
App rendered
PlainCard rendered
MemoCard rendered
MemoStyled rendered (new style object)