React.memo and Referential Equality

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

1

Exercise 1 of 1

Stable Object Props with useMemo

React.memo breaks when object props are recreated inline — useMemo gives them a stable reference.

Dashboard — theme object recreated inline

Unrelated state: 0

ThemePanel (memo'd) renders: 1

Color: #6366f1 / Size: md

Props haven't changed — but memo can't tell, because the object reference is new.

Click Tick. ThemePanel flashes every time — even though theme content never changes. React.memo compares object references, not values: {} !== {}.

Test Your Understanding

Multiple choice — select an answer to see the explanation.

1 / 4

What does "shallow equality" mean in the context of React.memo?