Are we React-ing wrongly?
summary
Claim: useMemo and useCallback are overused and often harm more than help. Evidence: an official docs sample crashes (Azure Static Web App example left unpatched since 2022), benchmarks with 100 and 1,000 list items show memo saves under 1ms and sometimes slows the first render, and profiling reveals a first-render cost for memo allocation. Mechanism: useCallback produces cached function versions that invalidate on every click if they depend on state, causing many cached instances and potential memory overhead. Practical rules: avoid needless lifting, keep dependency lists small, and use memo/callback only for memoized children or hook dependencies.
AI-written summary · about
chapters (11)
- 0:00React misconceptions
- 2:17React’s evolution and docs gaps
- 6:39Overusing useMemo and useCallback
- 10:14Performance myths of useMemo
- 15:00Benchmarking useMemo
- 22:09How useCallback works
- 25:22useCallback performance issues
- 30:25Correct useCallback cases
- 34:00Fix before optimize
- 37:16Avoiding new hooks traps
- 40:52Q&A
