React Advanced Concepts: Re-Rendering, Performance & More

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