Mastering memoization in React - Advanced React course, Episode 5

👉 Based on the "Advanced React" book, Chapter 5: https://www.advanced-react.com

The fifth episode of the "Advanced React" course. The course will be uploaded episode by episode once every 1-2 weeks.

🎬 Episode 5: Memoization with useMemo, useCallback and React.memo

01:22 Intro to memoization and its purpose in React
03:33 How useMemo and useCallback hooks work - React API
04:55 How useMemo and useCallback hooks work - under the hood
07:38 Antipattern: passing props to non-memoized components
08:57 What is React.memo and why we need it
10:17 How to break React.memo - props spreading
11:44 Broken React.memo - children
12:52 Broken React.memo - improperly memoized children
13:44 useMemo for expensive calculations

👩🏻‍💻 Code examples:

1. useMemo and useCallback examples: https://codesandbox.io/p/sandbox/wiza...
2. React.memo example: https://codesandbox.io/p/sandbox/comp...
3. Props spread example: https://codesandbox.io/p/sandbox/gall...
4. Unmemoized hook function example: https://codesandbox.io/p/sandbox/shar...
5. Memo and children, first example: https://codesandbox.io/p/sandbox/epis...
6. Memo and children, second example: https://codesandbox.io/p/sandbox/epis...