What Abstraction Does React Introduce?

JavaScript could already update the DOM.

So why did we need React?

In my previous post, we discussed the history of Web UI and how it evolved from HTML to React.

But there are many misconceptions about React.

One of them is that React removes DOM manipulation.

That’s not the proper way to understand it.

Instead, React abstracts DOM manipulation.

So, what is abstraction?

The bigger picture of React's abstraction is where you describe UI declaratively as a function of application state, organize UI into components, and then let React handle the synchronization between that description and the React rendering environment.

That is about the overall abstraction, which abstracts many underlying tasks.

Let's understand that.

Abstractions

1. DOM Mutations

DOM mutations mean abstracting low-level concepts and thinking about that abstraction.

Before React, you need to think about the DOM nodes, properties, DOM methods, and DOM events.

React abstracts that and introduces concepts like Components, Props, UI, and State.

This is similar to how higher-level programming languages abstract machine instructions.

2. Declarative UI

Declarative means you describe what the result should be.

You are describing the desired UI.

You don't need to explicitly describe:

• Create dashboard DOM.
• Insert dashboard.
• Update Button.

Instead, React tracks your declaration and manages the transition between them.

This separates "What" from "How".

3. Component and State Abstraction

Before React, you needed to create reusable JavaScript functions intentionally.

But React makes UI itself composable.

This introduces the component abstraction.

State abstraction abstracts the tracking of what changed, which element depends on it, and what should I update.

4. Abstraction as a Contract

In React, you describe the UI corresponding to the current state.

Now React is responsible for reconciling that description with the rendered UI.

Now the developer's responsibility becomes:

• What should the UI look like?
• What state does it depend on?
• How are components composed?

And React manages the responsibility for rendered work, reconciliation, scheduling, commit, and host environment updates.