AlgorithmsBrowser and DOMRuns in your browserReviewed October 1, 2026

Virtual DOM Diff (Keys) Visualizer

Compare two lists and update only the DOM nodes that really changed - with and without keys. Interactive step-by-step animation with JavaScript code, complexity and front-end use cases.

Localprivate by defaultFastno sign-up path

Browser and DOMTime: O(n)Space: O(n)

List before (keys)List after (keys)Matching strategy

<ul>

DOM operations: 0

empty

Step 1 / 8

Each item has a key. React/Vue use keys to recognise the same item even when it moves, so unchanged DOM nodes are reused.

JavaScript

1function reconcileKeyed(oldList, newList) {
2  const oldPos = new Map(oldList.map((n, i) => [n.key, i]));
3  const newKeys = new Set(newList.map((n) => n.key));
4  let lastIndex = 0;
5  for (const next of newList) {
6    const i = oldPos.get(next.key);
7    if (i === undefined) insert(next);
8    else if (i < lastIndex) move(next);
9    else lastIndex = i;
10  }
11  for (const old of oldList) {
12    if (!newKeys.has(old.key)) remove(old);
13  }
14}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...

Virtual DOM Diff (Keys) Visualization and Animation

Compare two lists and update only the DOM nodes that really changed - with and without keys. Keep a map of the old items by key. Walk the new list: reuse a node when its key exists, insert it when it is new, move it when the order changed. Remove old nodes whose keys are gone. Time complexity: O(n). Space complexity: O(n). How React, Vue and other frameworks reconcile lists, and why you should give list items stable keys instead of array indexes.

How to use Virtual DOM Diff (Keys) Visualizer

Keep a map of the old items by key.
Walk the new list: reuse a node when its key exists, insert it when it is new, move it when the order changed.
Remove old nodes whose keys are gone.
Press Play, or step through with the arrow buttons and change the input to see how it reacts.

Questions

What is Virtual DOM Diff (Keys)?

Compare two lists and update only the DOM nodes that really changed - with and without keys.

What is the time complexity of Virtual DOM Diff (Keys)?

Time: O(n). Space: O(n).

Where do front-end developers use Virtual DOM Diff (Keys)?

How React, Vue and other frameworks reconcile lists, and why you should give list items stable keys instead of array indexes.

Does this upload my data?

No. This converter runs in your browser for ordinary use, so the input is not sent to a backend by this tool.

Related tools

Keep working without searching again.

Sorting