React Fundamentals: DOM, Virtual DOM, and Declarative Programming Explained

Introduction

React is one of the most popular technologies in web development today. Before learning components, hooks, and state management, it is important to understand the problem React was created to solve.

As web applications became more interactive, developers found themselves writing increasing amounts of code just to keep the user interface synchronized with application data. React introduced a different way of thinking about UI development by embracing declarative programming and automated rendering.

How Browsers Render Web Pages

When you visit a website, the server sends HTML, CSS, and JavaScript to the browser.

The browser first parses the HTML and builds a structure known as the Document Object Model (DOM). The DOM is a tree-like representation of every element on the page.

The browser combines the DOM with CSS information, builds a render tree, and finally paints pixels on the screen.

Whenever the DOM changes, the browser may need to recalculate layouts and repaint parts of the page. This process is one of the reasons UI updates can become expensive in large applications.

Imperative Programming

Imperative programming means telling the computer exactly how to perform a task.

Imagine giving instructions to a robot:

1. Move forward.
2. Turn left.
3. Pick up the box.

You are describing every step required to achieve the outcome.

Traditional JavaScript DOM manipulation follows the same approach.

const button = document.getElementById('save-btn');
button.textContent = 'Saving...';
button.disabled = true;

Here we manually tell the browser what should change.

This works well for small applications, but as the number of UI elements and states grows, manually tracking every change becomes difficult.

Declarative Programming

Declarative programming focuses on describing the desired outcome rather than the individual steps required to achieve it.

Instead of telling the browser how to update the interface, we describe what the interface should look like.

<button disabled={isSaving}>
  {isSaving ? 'Saving...' : 'Save'}
</button>

We simply describe the desired UI for a particular state. React determines the necessary DOM updates behind the scenes.

React is declarative, but it still performs imperative DOM operations internally. The difference is that React performs those operations on our behalf.