How does ReactJS work behind the scenes?

ReactJS is a powerful JavaScript library for building user interfaces. While it appears simple on the surface, React performs a lot of complex operations behind the scenes to efficiently update the UI. Here's an overview of how it works internally:

#### 1. Virtual DOM & Component Rendering

React doesn't manipulate the real DOM directly. Instead, it uses a Virtual DOM — a lightweight JavaScript representation of the UI.

When a component renders (e.g., <App />):

• React executes the component function (e.g., App()).
• Hooks like useState are registered and tracked in order.
• React builds a Virtual DOM tree from the returned JSX.
• This virtual DOM is a plain JS object that describes the desired UI.

This process ensures fast and efficient rendering before React decides how to update the real DOM.

#### 2. React Fiber Architecture

React’s core engine is called Fiber, introduced in React 16. Fiber is a reimplementation of the React reconciliation algorithm with the following capabilities:

• Breaks rendering work into units of work (fiber nodes).
• Enables interruptible rendering (important for responsiveness).
• Supports priority scheduling and concurrent rendering.

Each Fiber node represents a component and stores:

• The component type (function/class).
• Props, state, and effects.
• Links to parent, child, and sibling fibers.

#### 3. Reconciliation (Diffing Algorithm)

When state or props change:

• React re-executes the component to produce a new virtual DOM.
• It compares the new virtual DOM to the previous one using an efficient diffing algorithm.
• React determines the minimal set of DOM changes required.

This process is known as reconciliation.

#### 4. Commit Phase (Real DOM Updates)

Once reconciliation is done:

• React enters the commit phase.
• It applies calculated changes to the real DOM.
• It also runs side effects like useEffect or useLayoutEffect.

This is the only time React interacts directly with the browser DOM.

#### 5. Hooks and State Management

With Hooks (like useState, useEffect):

• React keeps an internal list of hooks per component.
• Hooks are identified by their order in the function.
• When state updates occur, React re-renders the component and re-runs the hooks in the same order.

#### 6. React Scheduler

React uses an internal Scheduler to control how updates are prioritized:

• Urgent tasks like clicks and inputs are processed immediately.
• Non-urgent tasks (like data fetching) can be delayed or paused.
• This improves responsiveness and allows for time slicing in Concurrent Mode.