React vs traditional JavaScript - Visual Side-by-Side Comparison

Concept Flow - React vs traditional JavaScript

Start: User opens page

↓

Traditional JS: DOM manipulation

↓

Update UI by direct DOM changes

↓

React: Component render

↓

React: State change triggers re-render

↓

React: Virtual DOM diff

↓

React: Efficient DOM update

↓

User sees updated UI

This flow shows how traditional JavaScript updates the UI by changing the DOM directly, while React uses components and state to update the UI efficiently through a virtual DOM.

Execution Sample

React

import React, { useState } from 'react';

const CounterButton = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
};

export default CounterButton;

A React button that updates its displayed count when clicked using state and re-render.

Execution Table

Step	Action	State Before	State After	UI Update	DOM Change
1	Initial render	count=0	count=0	Button shows 'Clicked 0 times'	Button element created with text 'Clicked 0 times'
2	User clicks button	count=0	count=1	Button shows 'Clicked 1 times'	Text node inside button updated to 'Clicked 1 times'
3	User clicks button again	count=1	count=2	Button shows 'Clicked 2 times'	Text node inside button updated to 'Clicked 2 times'
4	No further clicks	count=2	count=2	UI unchanged	No DOM changes

💡 User stops clicking, state remains stable, no further UI or DOM updates.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 2 Insights

Why does React update only the changed text instead of rebuilding the whole button?

React uses a virtual DOM to compare changes and updates only the parts that changed, as shown in steps 2 and 3 of the execution_table where only the text node changes.

In traditional JavaScript, how would updating the count differ from React's approach?

Traditional JavaScript would manually find the button element and change its text content directly, without a virtual DOM diff, which can be less efficient and more error-prone.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 2?

A 0

B 2

C 1

D Undefined

💡 Hint

Check the 'State After' column in row for step 2.

At which step does the UI first update to show 'Clicked 2 times'?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'UI Update' column for each step in the execution_table.

If the user never clicks the button, how many DOM changes occur?

A 1

B 2

C 0

D Multiple

💡 Hint

Refer to step 1 and step 4 in the execution_table for DOM changes.

Concept Snapshot

React updates UI using components and state.
State changes trigger re-render.
React uses virtual DOM to update only changed parts.
Traditional JS updates DOM directly.
React is more efficient and easier to manage UI updates.

Full Transcript

This visual execution compares React and traditional JavaScript UI updates. Traditional JavaScript changes the DOM directly when updating the UI. React uses components with state. When state changes, React re-renders the component. It compares the new virtual DOM with the old one and updates only the changed parts in the real DOM. The example shows a button with a count. Initially, count is zero and the button text shows 'Clicked 0 times'. When the user clicks the button, React updates the count state and re-renders the button text to 'Clicked 1 times', changing only the text node in the DOM. This process repeats with each click. If the user stops clicking, no further updates happen. This approach makes UI updates efficient and easier to manage compared to manual DOM manipulation in traditional JavaScript.