practiceintermediate
Memoize callbacks
A parent with a counter passes onDelete to a memoized list. Each render recreates onDelete, invalidating memo on all items. Use useCallback so items stop re-rendering when only the counter changes.
Objectives
- 1.Wrap onDelete in useCallback with the correct dependencies
- 2.Verify in the console that items no longer re-render when incrementing the counter
- 3.Understand why memo(Item) without useCallback is not enough
your code
Hint
useCallback(fn, [deps]) returns the same function reference between renders as long as the deps don't change. memo() compares props by reference — if the function changes, the child always re-renders.
Related concepts
Was this helpful?
Sign in to give feedback