Skip to main content

Can you explain how React’s reconciliation algorithm works? What are keys in React, and why are they important?

 🔄 React’s Reconciliation Algorithm

Reconciliation is the process React uses to determine how the UI should change in response to new state or props. When your component renders, React builds a virtual DOM (a lightweight copy of the real DOM), and when the state or props change, React creates a new virtual DOM and compares it to the previous one.

React uses a diffing algorithm to find the minimal set of changes needed to update the real DOM efficiently.

How does React’s useMemo hook help performance, and what are the common mistakes when using it?

Key principles:

  1. Assumes trees of the same type will result in similar output.

  2. Diffs elements of the same level in the tree.

  3. Recursively updates children, only if the parent type is the same.

  4. Uses keys to optimize list updates (more on that below!).

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

If you change it to:

<ul>
  <li>Banana</li>
  <li>Apple</li>
</ul>

React doesn’t blindly re-render everything. It tries to reuse as much of the existing DOM as possible. However, without keys, it may remove and recreate both <li> elements even if they just swapped.

🔑 What Are Keys in React?

Keys are special string attributes you assign to elements in a list to help React identify which items have changed, been added, or removed.

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Why are keys important?

  • Efficiency: Helps React avoid unnecessary DOM manipulations.

  • Identity: Lets React uniquely identify each element, so it can preserve component state between renders.

  • Stability: Avoids bugs that can occur when components are mistakenly re-created instead of updated.

Bad practice:

Using the index as a key is okay only when the list never changes order or length.

// ❌ Not ideal if list changes
{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

TL;DR

  • Reconciliation: React compares old and new virtual DOMs to update only what's necessary.

  • Keys: Help React match elements between renders for optimal performance and accurate updates.

Let me know if you want a visual example or a deep dive into how the diffing algorithm works under the hood!

Popular posts from this blog

Explain the Angular compilation process: View Engine vs. Ivy.

 The Angular compilation process transforms your Angular templates and components into efficient JavaScript code that the browser can execute. Over time, Angular has evolved from the View Engine compiler to a newer, more efficient system called Ivy . Here's a breakdown of the differences between View Engine and Ivy , and how each affects the compilation process: 🔧 1. What Is Angular Compilation? Angular templates ( HTML inside components) are not regular HTML—they include Angular-specific syntax like *ngIf , {{ }} interpolation, and custom directives. The compiler translates these templates into JavaScript instructions that render and update the DOM. Angular uses Ahead-of-Time (AOT) or Just-in-Time (JIT) compilation modes: JIT : Compiles in the browser at runtime (used in development). AOT : Compiles at build time into efficient JS (used in production). 🧱 2. View Engine (Legacy Compiler) ➤ Used in Angular versions < 9 🔍 How It Works: Compiles templat...
Read more

Explain the concept of ControlValueAccessor in custom form components.

 In Angular, the ControlValueAccessor interface is what allows custom form components to work seamlessly with Angular forms (both reactive and template-driven). 🧠 What is ControlValueAccessor ? It’s an Angular bridge between your custom component and the Angular Forms API . When you use a custom form component (like a date picker, dropdown, slider, etc.), Angular doesn't automatically know how to read or write its value. That’s where ControlValueAccessor comes in. It tells Angular: How to write a value to the component How to notify Angular when the component’s value changes How to handle disabled state 📦 Common Built-in Examples: <input> and <select> already implement ControlValueAccessor You implement it when creating custom form controls 🔧 Key Methods in the Interface Method Purpose writeValue(obj: any) Called by Angular to set the value in the component registerOnChange(fn: any) Passes a function to call when the component value ch...
Read more

What are the different types of directives in Angular? Give real-world examples.

In Angular, directives are classes that allow you to manipulate the DOM or component behavior . There are three main types of directives: 🧱 1. Component Directives Technically, components are directives with a template. They control a section of the screen (UI) and encapsulate logi c. ✅ Example: @Component ({ selector : 'app-user-card' , template : `<h2>{{ name }}</h2>` }) export class UserCardComponent { name = 'Alice' ; } 📌 Real-World Use: A ProductCardComponent showing product details on an e-commerce site. A ChatMessageComponent displaying individual messages in a chat app. ⚙️ 2. Structural Directives These change the DOM layout by adding or removing elements. ✅ Built-in Examples: *ngIf : Conditionally includes a template. *ngFor : Iterates over a list and renders template for each item. *ngSwitch : Switches views based on a condition. 📌 Real-World Use: < div * ngIf = "user.isLoggedIn...
Read more