Question 1

What is the Virtual DOM in React, and how does the Reconciliation (Diffing) algorithm work?

Accepted Answer

The Virtual DOM is a lightweight in-memory representation of the real DOM tree; Reconciliation calculates differences precisely and makes as few direct browser DOM changes as possible.

Question 2

Why are Keys important when rendering lists, and what are the risks of using the array index as a Key?

Accepted Answer

Keys let React identify unique items between renders and detect items that were added, removed, or moved; using an Index can cause state issues and mix up input values after changes.

Question 3

What is JSX, and what happens to it during compilation?

Accepted Answer

JSX is a JavaScript syntax extension for writing HTML-like structures in code; a compiler such as Babel or SWC turns it into element-creation function calls (React.createElement or the jsx runtime).

Question 4

What are Pure Components and purity in React functions (Pure Functions)?

Accepted Answer

A pure function or component always produces the same output for the same inputs (Props) without causing external side effects (Side Effects) during Render.

Question 5

What is the role of React Fiber, and how do Render Phase and Commit Phase differ?

Accepted Answer

Render calculates changes in memory and Fiber may pause or delay it to keep the interface responsive; Commit synchronously applies all changes to the real DOM without interruption.

Question 6

How do Event Pooling and the SyntheticEvent system work in React?

Accepted Answer

React provides a unified SyntheticEvent object that wraps native browser events for consistent behavior across browsers, and manages events through Event Delegation at the application root.

Question 7

What are Portals in React, and when should you use them?

Accepted Answer

Portals render a child in a DOM node outside its parent component's hierarchy while preserving event bubbling and Context as if it were a regular child.

Question 8

What is StrictMode, and what checks does it perform in development?

Accepted Answer

StrictMode helps developers detect deprecated practices and hidden problems; it renders components and reruns Effects twice in development.

Question 9

What is the Lifting State Up principle, and when should you use it?

Accepted Answer

It means moving shared state to the nearest common Ancestor of components that need to stay in sync with and update the same data.

Question 10

What are Error Boundaries, and how do they handle unexpected errors in a component tree?

Accepted Answer

They are special components that catch JavaScript errors in their descendant component tree during Render and lifecycle methods, showing a Fallback UI instead of crashing the entire application.