Don't Forget React memo
summary
Claims that useCallback is just sugar for useMemo, shows a custom memorization hook built with useRef/useState, and reports concrete timings — filtering costs ~16.5 ms and 45 ms sort cost on second renders — so wrapping every function backfires. Demonstrates a real react-table refactor where memo logic moves to refs, uses react-use and Apollo for a systems-locked cache, and concludes that selective memoization helps but blanket useMemo/useCallback wastes CPU and memory.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:37React memo and useMemo matter
- 3:23React memo use cases
- 5:54useMemo useCallback myths
- 7:19Custom hooks with useMemo useRef
- 9:29useCallback fails to prevent renders
- 11:18useCallback performance pitfalls
- 12:50Parent renders affect children
- 13:55Refactoring context with useState useRef
- 15:20Skip React memo optimizations
- 16:06Performance debugging tools
- 16:33Closing remarks
related talks
30mAre we React-ing wrongly?
42mAre we React-ing wrongly?
38mWe are React-ing Wrongly
21mDid You Not Get the Memo? Signed, Atomic Design
28mStop Memoizing with “React Forget”
19mThe Mystery of React Renders
30mThe web in hyper speed: Boosting performance with memoization
37mThe magic behind the React compiler