Module 4: List Manipulation

React Keys

The key prop is the secret ingredient that allows React to identify which items have changed, been added, or removed. Mastering it is crucial for performance.

Reconciliation_Engine.v2

🔑

When rendering a list in React, each item needs a 'key' prop. It's a special string attribute you need to include when creating lists of elements.

The Diffing Algorithm

React uses a Virtual DOM to optimize updates. When a list changes, React compares the new elements with the previous ones.

Fig 1.1: Without keys, React re-renders the entire branch. With keys, it simply moves the existing DOM nodes.

Why not use Math.random()?

Using key={Math.random()} is a critical error. Since a new key is generated on every render, React will unmount and remount every list item every single time, destroying state (like input focus or scroll position) and killing performance.

🔑

Diffing Expert

Corrected a list without using indexes as keys.

🧬

Stable ID

Identified the risk of Math.random() in keys.

⚡

Reconciliation Pro

Understood the Virtual DOM diffing process.

Technical Dictionary

Reconciliation

The process through which React updates the DOM by comparing Virtual DOM trees.

Diffing

The algorithm React uses to find the minimum number of operations to update the UI.

Virtual DOM

A lightweight representation of the real DOM kept in memory.

Sibling

Elements at the same level in the component tree.

Unmounting

The phase when a component is removed from the DOM.

Hydration

Process of attaching event listeners to static HTML rendered by the server.

Support Us