Mastering memoization in React - Advanced React course, Episode 5
9.8 هزار بار بازدید -
6 ماه پیش
-
👉 Based on the "Advanced
👉 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...
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...
6 ماه پیش
در تاریخ 1402/11/03 منتشر شده
است.
9,864
بـار بازدید شده