⚙️ How React JS Works – A Deep Dive into Virtual DOM, JSX & Components

React JS is not just a UI library—it’s a powerful, declarative way to build interactive web apps. But what really makes React tick? In this blog, we’ll explore how React works under the hood, focusing on the Virtual DOM, JSX, and its component-based architecture.

📦 React’s Core Philosophy

React treats the UI as a function of state. This means if your data changes, your UI updates accordingly—without you manually manipulating the DOM.

🧠 What Is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM. React creates a virtual copy of the actual DOM and compares changes using a process called diffing.

🚀 Why Virtual DOM?

• Reduces direct DOM manipulation
• Improves performance by minimizing re-renders
• Updates only what’s necessary, efficiently

🧬 Example: Virtual DOM in Action

// React element
const element = <h1>Hello, React!</h1>;

ReactDOM.render(element, document.getElementById('root'));
  

React creates a virtual tree for the above element. When state changes, it re-generates this tree and updates only the affected nodes in the real DOM.

🔤 What is JSX?

JSX (JavaScript XML) is a syntax extension that looks like HTML but is actually syntactic sugar for React.createElement().

🧪 JSX Example

const element = <h1>Welcome to JSX</h1>;
  

Compiles to:

const element = React.createElement('h1', null, 'Welcome to JSX');
  

JSX is faster, more readable, and integrates well with components.

🧱 React Components

React apps are made up of components—reusable, independent pieces of UI that return elements to be rendered.

💡 Function Component Example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  

📍 JSX + Props = Dynamic UI

<Welcome name="Anjum" />
  

Props allow you to pass data to components like arguments to functions.

🌀 How React Updates the DOM

1. User interacts (click/input/scroll)
2. Component state or props change
3. React re-renders the component virtually
4. Diffing algorithm compares old vs. new VDOM
5. Minimal real DOM updates are applied

🛠️ React Reconciliation Process

• Uses keys to track elements in lists
• Ignores unchanged subtrees for speed
• Efficiently mounts, updates, or unmounts nodes

🧩 Behind the Scenes: Fiber Architecture

React 16+ introduced Fiber, an internal engine that allows React to pause, resume, and prioritize rendering—enabling features like concurrent rendering.

🎯 Summary

• Virtual DOM: Improves performance by reducing direct DOM manipulations
• JSX: Syntactic sugar for writing UI components in a readable format
• Components: Small, reusable functions that manage UI and state

React works smartly under the hood to deliver fast and reactive user interfaces. Its Virtual DOM, JSX syntax, and powerful component model make modern web development intuitive and scalable.

Stay tuned for our next blog: “Understanding React State and Lifecycle Methods”