React.memo, useMemo, and useCallback Optimizations
Learn how to optimize React Components using React.memo, useMemo, and useCallback hooks.
Key Takeaways!
4:40 - When a Parent Component re-renders, all Child components will re-render as well.
5:30 - React.memo is a higher order component, used with functional components. React.memo will compare the previous props to the next props, and if different, will re-render the component.
6:52 - JavaScript Primitives (string, number, boolean) being passed as a prop will work fine with React.memo.
7:30 - Arrays, Objects, Functions being passed as a prop will not work with React.memo alone. You'll need to use hooks like useMemo around the Array or Object.
8:17 - In a functional component, every re-render will cause everything in the function body to be "re-created". So Arrays, Objects, and Functions will be new and different on every re-render. When these are passes to the Child Component, it will cause the Child to re-render.
8:55 - Wrapping Arrays and Objects with the useMemo hook will solve this problem. Better yet, if the dependency array is empty, you should just hoist it out of the function body.
14:24 - When passing Functions down as props, and when Functions are used in a dependency array, wrap them in the useCallback hook to avoid re-renders and prevent useEffects from firing on each re-render.
20:30 - Don't just memoize all the things. Here is the blog post by Kent about when you should use these memoization techniques: https://kentcdodds.com/blog/usememo-and-usecallback
Finished Code: https://github.com/codebushi/react-memo
Follow me on
Twitter: https://twitter.com/HuntaroSan
Dev.to: https://dev.to/changoman
Видео React.memo, useMemo, and useCallback Optimizations канала Code Bushi
Key Takeaways!
4:40 - When a Parent Component re-renders, all Child components will re-render as well.
5:30 - React.memo is a higher order component, used with functional components. React.memo will compare the previous props to the next props, and if different, will re-render the component.
6:52 - JavaScript Primitives (string, number, boolean) being passed as a prop will work fine with React.memo.
7:30 - Arrays, Objects, Functions being passed as a prop will not work with React.memo alone. You'll need to use hooks like useMemo around the Array or Object.
8:17 - In a functional component, every re-render will cause everything in the function body to be "re-created". So Arrays, Objects, and Functions will be new and different on every re-render. When these are passes to the Child Component, it will cause the Child to re-render.
8:55 - Wrapping Arrays and Objects with the useMemo hook will solve this problem. Better yet, if the dependency array is empty, you should just hoist it out of the function body.
14:24 - When passing Functions down as props, and when Functions are used in a dependency array, wrap them in the useCallback hook to avoid re-renders and prevent useEffects from firing on each re-render.
20:30 - Don't just memoize all the things. Here is the blog post by Kent about when you should use these memoization techniques: https://kentcdodds.com/blog/usememo-and-usecallback
Finished Code: https://github.com/codebushi/react-memo
Follow me on
Twitter: https://twitter.com/HuntaroSan
Dev.to: https://dev.to/changoman
Видео React.memo, useMemo, and useCallback Optimizations канала Code Bushi
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
React Hooks Tutorial - 26 - useCallback HookReact Memo | useMemo | useCallback - Optimize Performance of your React ApplicationsReact Hook useRef and forwarding refs with forwardRefHow to use the React Profiler to find and fix Performance ProblemsREACT MEMO vs USECALLBACK vs USEMEMOWhat is React memo?React with TypeScript Crash Course - 2021Why You Need to Understand Re-rendering in React and useState HookReact Memo | new way to Memoize Functional ComponentsRedux or Context in ReactLearn useCallback In 8 Minutes10 React Hooks Explained // Plus Build your own from ScratchUtilizando React.memo | Code/Drops #18ReactJS Tips Avoid Unnecessary Re-RendersReact Hooks useCallback TutorialAdvanced React Patterns, Performance, Environment and Testing | New Course Launch 🎉Datavis 2020 Episode 45 - React Performance OptimizationuseMemo Hook react tutorialReact.js Hooks Crash CourseHow to use memo in React to Optimize Renders