React Advanced Concepts: Re-Rendering, Performance & More
Published 3/2025
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.04 GB | Duration: 5h 40m
Published 3/2025
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 3.04 GB | Duration: 5h 40m
Deep Understanding of React’s Inner Workings and Best Practices, From Intermediate to Advanced React
What you'll learn
Understanding React State Like Never Before
Deep Understanding of Re-Rendering
React’s Decision Process: Mount, Re-Render, and Unmount
Memoization & Performance Optimization
Reconciliation & Diffing Algorithm
Higher-Order Components (HOC)
Context API & Advanced State Management
Handling Race Conditions
Requirements
Have experience with React (1-2 years)
Ability to build applications with React
Description
You've been working with React for a while, building applications and following best practices. But do you sometimes find React behaving in ways you don’t fully understand? Do unexpected re-renders, performance issues, or complex component interactions leave you feeling stuck?This course is designed to take you beyond the fundamentals and into the advanced mechanics of React. We’ll break down the hidden intricacies of React’s rendering engine, performance optimization techniques, and architectural patterns that top React developers use to build scalable and efficient applications.What You’ll Learn:- Understanding React State Like Never Before: Learn exactly how React manages state, how it triggers updates, and how to avoid common state-related pitfalls.- Deep Understanding of Re-Rendering: Understand what re-rendering truly means, when React decides to re-render a component, and how to prevent unnecessary renders.- React’s Decision Process: Mount, Re-Render, and Unmount: Gain a crystal-clear understanding of when React mounts a component, when it re-renders, and when it unmounts—and how you can control this behavior for better performance.- Memoization & Performance Optimization: Master techniques like useMemo, useCallback, and React.memo to optimize expensive computations and prevent unnecessary updates.- Reconciliation & Diffing Algorithm: Learn how React efficiently updates the DOM behind the scenes and how understanding this process can help you write more performant components.- Higher-Order Components (HOC): Explore how to enhance component functionality using HOCs and compare them with modern alternatives like hooks.- Context API & Advanced State Management: Dive deep into React’s Context API, fix some performance issue- useRef & ForwardRef: Learn how to manage references, avoid unnecessary re-renders, and directly manipulate the DOM when needed.- Handling Race Conditions & Async Pitfalls: Discover how to prevent common issues when dealing with asynchronous operations in React, ensuring a smooth and bug-free user experience.- How to Optimize Performance in React Applications: Learn real-world techniques to improve app performance, reduce unnecessary renders, and make your React applications faster and more efficient.By the end of this course, you won’t just use React—you’ll truly understand React. You’ll be able to debug complex issues, optimize performance, and write more maintainable and scalable code with confidence.
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 Who is this course for?
Lecture 3 Source code
Section 2: State as a Snapshot: Deep Understand
Lecture 4 The fact about state
Lecture 5 State as a snapshot - concept
Lecture 6 Understand snapshot
Lecture 7 Snapshot example
Lecture 8 More snapshot example
Lecture 9 Set new state using callback
Section 3: Re-render: Deep Understand
Lecture 10 Introduction to re-render
Lecture 11 HeavyComponent
Lecture 12 Lifecyle overview
Lecture 13 First rule to fix performance: Isolate State
Lecture 14 Misconception about props
Lecture 15 Second rule to fix performance: Render as Props
Lecture 16 ElementBeforeReRender vs ElementAfterReRender
Lecture 17 Refactor to render as children
Lecture 18 Summarize
Section 4: Memoization: Enhance Performance Optimization
Lecture 19 Introduction to memoization
Lecture 20 Prevent unnecessary re-render using memo
Lecture 21 Break memo - Why memo not work?
Lecture 22 useCallback - memo function
Lecture 23 useMemo - memo result
Lecture 24 memo with useCallback & useMemo
Section 5: Reconciliation & Diffing Algorithms
Lecture 25 Section Overview
Lecture 26 Hmm. What's going on??
Lecture 27 How does React decide to unmount component?
Lecture 28 The difference between re-render and mount/unmount
Lecture 29 Force component mount/unmount
Lecture 30 Deep understand the "key" props
Lecture 31 Force component unmount with "key" props
Lecture 32 The anti-pattern
Section 6: Higher Order Component (HOC)
Lecture 33 What's HOC?
Lecture 34 Understand higher order component
Lecture 35 Implement withFetchData HOC
Lecture 36 Implement withTheme HOC
Lecture 37 Add additional logic to HOC
Section 7: React Context Deep Dive: Don't Scare Context
Lecture 38 Section Overview
Lecture 39 App overview
Lecture 40 State & pass props down
Lecture 41 Context can fix performance
Lecture 42 Optimize re-render for context
Section 8: Ref: Access to DOM Element
Lecture 43 Introduction
Lecture 44 Explain the ref in detail
Lecture 45 More about ref - experimental
Lecture 46 Most common use case
Lecture 47 Pass ref to children component
Lecture 48 useImperativeHandle
Section 9: Race Condition on Front End
Lecture 49 Welcome to this section
Lecture 50 Race condition demo
Lecture 51 The way to fix race condition
React developers who want to improve their skills,Want to understand React in depth