Example 7 · 30 min
Todo List
useCallback · memo · Stable References
The Question
"Build a todo app where adding a new item does not re-render every existing row. Use React.memo and useCallback together to keep child renders minimal. Explain when useCallback gives no benefit."
useCallbackReact.memostable referencesfunctional updateswhen NOT to memo
memo alone
Fails — inline handlers are new references every render, so memo's shallow comparison always sees changed props.
useCallback alone
Useless — without memo the child re-renders regardless of whether the function reference is stable.
memo + useCallback
Works — stable refs pass memo's shallow check, so unchanged rows are skipped entirely.
1 of 3 complete33%
Read the React docsrenders: 1
Build a todo apprenders: 1
Understand useCallbackrenders: 1
Add a new item — watch existing rows keep their render count (memo is working).