React Interview Questions 1-5 (Virtual DOM, Components, JSX, Props vs State, Keys)

Welcome to the React section of your full-stack interview preparation. As a Python developer, you might be used to server-side templating like Jinja2 or Django templates. React requires a slight shift in thinking: building a user interface as a collection of independent, reusable components that manage their own state.

This lesson covers the absolute essentials—the "Big Five" concepts that form the foundation of every React application. We will explore how React updates the screen efficiently, the difference between old and new component styles, and how data moves around. Take a deep breath; logic remains the same, only the syntax changes.

1. What is the Virtual DOM and how does it improve performance?

The DOM (Document Object Model) is the browser's representation of the page. Manipulating the real DOM is slow and expensive because every change forces the browser to recalculate layout and repaint the screen.

The Virtual DOM is a lightweight JavaScript object that is a copy of the real DOM. When data changes in React, it doesn't update the real DOM immediately. Instead:

Analogy: Imagine you are an architect renovating a house.
Real DOM approach: You tear down the entire house and rebuild it just to add a new window. (Slow & Wasteful).
Virtual DOM approach: You draw a blueprint (Virtual DOM). You look at the old blueprint and the new blueprint, see that only one window has changed, and you instruct the builders to install just that one window. (Fast & Efficient).

2. What is the difference between Functional and Class components?

These are the two ways to define components in React. While both perform the same core job (accepting props and returning UI), they differ in syntax and feature usage.

// 1. Functional Component (Modern)
const WelcomeFunc = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

// 2. Class Component (Legacy)
class WelcomeClass extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

3. What is JSX? Is it required for React?

JSX stands for JavaScript XML. It is a syntax extension that allows us to write HTML-like code directly inside JavaScript.

Is it required? No, strictly speaking, it is not required. Browsers cannot understand JSX. Tools like Babel compile JSX down to regular JavaScript calls (specifically React.createElement). However, writing React without JSX is extremely verbose and hard to read, so it is universally used.

// What you write (JSX)
const element = <h1 className="greeting">Hello, world!</h1>;

// What it compiles to (Pure JS)
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

Tip: Because JSX is actually JavaScript, we can embed dynamic variables inside curly braces like {variableName}, similar to f-strings in Python.

4. What are Props and State? What is the difference between them?

Both Props and State are plain JavaScript objects that hold information that influences the output of the render. The difference is in ownership and mutability.

Analogy:
Props: Like your DNA or Eye Color. You received it from your parents, and you cannot change it yourself.
State: Like your Mood or Hunger Level. It is internal to you, and it changes throughout the day based on events (like eating lunch).

const UserProfile = (props) => {
  // 'props.name' is passed from parent. We cannot change it here.
  
  // 'status' is state. We CAN change it.
  const [status, setStatus] = React.useState("Online");

  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Status: {status}</p>
      <button onClick={() => setStatus("Busy")}>Set to Busy</button>
    </div>
  );
};

// Usage
// <UserProfile name="Alice" /> 

5. What is the "key" prop and why is it important in lists?

When rendering a list of items in React (using .map()), you must provide a special string attribute named key to each item.

React uses keys to identify which items in the list have changed, been added, or been removed. This is crucial for the Reconciliation process (see Question 1). Without unique keys, React might re-render the entire list unnecessarily or, worse, mix up the state of items (like text typed into inputs).

Best Practice: Always use stable, unique IDs from your data (like database IDs: user.id). Avoid using the array index (i) if the list can be reordered, sorted, or filtered, as this can cause bugs.

const todoList = [
  { id: 101, task: "Buy Milk" },
  { id: 102, task: "Walk Dog" },
  { id: 103, task: "Code React" }
];

const TodoApp = () => {
  return (
    <ul>
      {todoList.map((todo) => (
        // Good: Uses unique ID
        <li key={todo.id}>{todo.task}</li>
      ))}
    </ul>
  );
};

You have laid the groundwork! Understanding the Virtual DOM, the shift to Functional components, and the flow of data via Props and State is 80% of the battle. In the next section, we will look at Hooks, which unlock the true power of functional components.