React Optimisation using React.memo | How to prevent unnecessary rerenders?
𝗛𝗼𝘄 𝘁𝗼 𝗽𝗿𝗲𝘃𝗲𝗻𝘁 𝘂𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 using "𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼"?
React.memo (is a higher-order component) takes the component and memoizes the rendered output of the wrapped component.
So whenever there is a re-render in the parent, For a child it will compare the props and if all the props are the same it reuses the memoized result skipping the next rendering.
Topics covered:
1. How does React work?
2. Different phases of re-rendering
3. Understanding React.memo
4. Example code to see React.memo in action
5. Important points to look before doing optimisations
6. Final Summary
Other Videos:
React Hooks for Beginners
1. Understanding useEffect hook in detail: • React: Understanding useEffect hook in det...
2. Learn useReducer Hook in React: • Learn useReducer Hook in React (complete g...
React Projects for Beginners:
1. Create Todo App in React: • Build a Todo App with React using Hooks | ...
2. Create a CRUD App in React: • Create a CRUD App in React
React Beginners Series:
1. Complete React Roadmap: • React Roadmap for developers 2021 | React ...
2. What is React? useState hook: • React Tutorial: What is React? | Thinking ...
3. Props in React” • What are props in React (in-detail)? | Con...
4. Conditional rendering in React?: • React Tutorial: What is conditional Render...
5. List & Keys in React: • Lists & Keys in React | Create your own cu...
6. Handling Forms in React: • React Tutorial: Handling Forms in React (C...
7. Creating Signup form in React: • How to create Signup / Registration form i...
Connect with me:
LinkedIn: / varunprashar5
Twitter: / varunprashar
Would love to mentor you or answer your queries personally on programming