Mastering memoization in React - Advanced React course, Episode 5

Advanced React course

👉 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/wizardly-wing-sc3x8t?file=%2FApp.tsx 2. React.memo example: https://codesandbox.io/p/sandbox/compassionate-microservice-tjvng7 3. Props spread example: https://codesandbox.io/p/sandbox/gallant-panna-czylyx 4. Unmemoized hook function example: https://codesandbox.io/p/sandbox/sharp-https-j5vrxg?file=%2FApp.tsx 5. Memo and children, first example: https://codesandbox.io/p/sandbox/episode-5-example1-memo-and-children-dvz59l 6. Memo and children, second example: https://codesandbox.io/p/sandbox/episode-5-example2-memo-and-children-2-j2w3nf

About the course

Advanced concepts, strategies, techniques, patterns and in-depth investigations in React. Based on the chapters of the "Advanced React" book: https://advanced-react.com/