From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Reconciliation algorithm: Detailed explanation of the diffing process

Reconciliation algorithm: Detailed explanation of the diffing process

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Reconciliation algorithm: Detailed explanation of the diffing process

“

Hi, and welcome back. In this video, we'll discuss React's reconciliation algorithm. As we discussed in the previous video, React compares the previous and the current virtual trees. It uses heuristics to identify what actually has changed. If of some element, an attribute has changed, then it only updates the attribute, otherwise it can create or re-render the complete element. We'll discuss that in detail in the next slide. React also uses keys to improve lists rendering. Let's deep dive into that. React has a comparison algorithm which actually compares what has changed. When a state or a props has changed, a new virtual is created. You can refer to state and props as any change for now, since we are going to discuss state and props in more details in the upcoming slides. Based on any change, React performs a difference to compare the previous and the current trees. It only updates parts of the UI that has changed. It can be a complete subtree, a node or a leaf value, depending on…

Contents