Part 9: Rendering Lists & Keys: Virtual DOM Reconciliation

Rendering dynamic collections of items (products, comments, feed posts) is a fundamental task in web development. React uses the JavaScript .map() array method along with a mandatory key prop.

1. Rendering Lists with .map()

export default function TechStackList() {
  const technologies = [
    { id: 't1', name: 'React', category: 'Frontend' },
    { id: 't2', name: 'TypeScript', category: 'Language' },
    { id: 't3', name: 'Tailwind CSS', category: 'Styling' },
  ];

  return (
    <div className="p-4">
      <h3 className="font-bold text-lg mb-2">Our Tech Stack</h3>
      <ul>
        {technologies.map((tech) => (
          <li key={tech.id} className="py-1 border-b">
            <strong>{tech.name}</strong> - <em>{tech.category}</em>
          </li>
        ))}
      </ul>
    </div>
  );
}

2. Why are Keys Essential?

React's reconciliation algorithm relies on the key prop to identify which items in a list have been added, removed, or reordered between renders.

Without keys, if you insert an item at the top of a 1,000-item list, React would re-render every single DOM node because it cannot tell that items 1 through 1,000 simply shifted positions.

With unique, persistent keys: - React matches the key between renders. - It moves existing DOM nodes instead of destroying and recreating them. - Form inputs, CSS transitions, and local component states stay intact.

3. Why Using Array Index as Key is an Anti-Pattern

// ❌ DANGEROUS: Using index as key
{items.map((item, index) => <TodoItem key={index} {...item} />)}

Using the array index causes bugs when: - The list can be sorted, filtered, or items can be inserted/deleted in the middle. - Child components maintain internal state (like a checked checkbox or an input field)—the state will bleed into the wrong item!

Best Practice:

Always use stable, unique IDs from your database or generated via UUIDs:

//  CORRECT: Stable unique identifier
{items.map((item) => <TodoItem key={item.id} {...item} />)}

Key Takeaways

• Use .map() to transform data arrays into JSX element arrays.
• Always provide a unique, stable key prop to the outermost element in the .map() return.
• Never use array index as a key for dynamic lists that can be reordered or modified.

In Part 10, we will explore Controlled vs. Uncontrolled Form Components!