React Hooks Part 4

Memoization for Fun and Profit Performance

What is Memoization

In computing, memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

— Wikipedia

1. Make it Work

2. Make it Right

3. Make it Fast

Memoization in React

  • Strictly for Optimization: Your code should work without these, too
  • useMemo: Use to cache expensive calculations
  • useCallback: Use to maintain referencial equality between renders

useCallback

First: Pure Components

Pure components only re-render when their props change.

Pop Quiz

Resources

  • Kent C. Dodds on useMemo and useCallback
  • Official useMemo docs
  • Official useCallback docs
  • Bitovi React Talks on YouTube
  • Bitovi React Consulting

Bitovi Community Slack

https://www.bitovi.com/community/slack

Questions?