React Interview Questions

The Virtual DOM (VDOM) is a lightweight copy of the real DOM stored in memory. Whenever the application's state or props change, React first updates the Virtual DOM instead of directly modifying the browser's DOM.

React then compares the new Virtual DOM with the previous one using a process called Diffing. After finding the differences, React updates only those elements that actually changed. This process is known as Reconciliation.

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

Browsers cannot understand JSX directly. During compilation, Babel converts JSX into regular JavaScript using React.createElement().

React components can be created in two ways:

• Functional Components

• Class Components

Earlier, Class Components were used because they supported state and lifecycle methods. However, after React introduced Hooks, Functional Components became much more powerful and are now the recommended approach.

Functional Components

• Simple JavaScript functions

• Easier to understand

• Less code

• Use Hooks

• Better performance

• Recommended by React

Class Components

• Use ES6 classes

• Extend React.Component

• Use lifecycle methods

• More boilerplate code

• Rarely used in new projects

Props (Properties) are used to pass data from a parent component to a child component.

Props are read-only, meaning the child component cannot modify them. They make components reusable because different data can be passed every time the component is used.

A Component is an independent and reusable piece of UI. Instead of writing one huge HTML page, React divides the application into multiple components like Navbar, Sidebar, Footer, Card, Login Form, etc.

Each component manages its own UI and logic, making code reusable and easier to maintain.

There are two main types:

• Functional Components

• Class Components

SPA stands for Single Page Application, while MPA stands for Multi Page Application.

In an SPA, the browser loads only one HTML page initially. After that, React updates the content dynamically without refreshing the entire page. This provides a faster and smoother user experience.

In an MPA, every navigation loads a completely new HTML page from the server.

SPA

• One HTML page

• Fast navigation

• Better user experience

• Uses React Router

MPA

• Multiple HTML pages

• Full page reload

• Slower navigation

• Traditional websites

A Fragment allows multiple elements to be returned from a component without adding an extra HTML element to the DOM.

Normally React components must return a single parent element. If you don't want an unnecessary <div>, you can use a Fragment.

Keys are special attributes that help React uniquely identify each element in a list. They allow React to efficiently determine which items have been added, removed, or updated.

Without keys, React may re-render the entire list, leading to unnecessary updates and potential UI bugs.

A key should be unique among sibling elements. Using database IDs is recommended because they remain stable across renders. Using the array index as a key should generally be avoided if the list can change order, because it can cause incorrect updates.

const students = [
  { id: 1, name: "Kartik" },
  { id: 2, name: "Rahul" },
  { id: 3, name: "Amit" },
];

function App() {
  return (
    <ul>
      {students.map((student) => (
        <li key={student.id}>{student.name}</li>
      ))}
    </ul>
  );
}

useState is one of the most commonly used Hooks in React. It allows Functional Components to store and update data (state). Before Hooks were introduced in React 16.8, only Class Components could have state. Now, Functional Components can also manage state using useState.

Whenever the state changes using its setter function, React automatically re-renders the component so that the UI always displays the latest data.

The useState Hook returns an array containing two values:

• The current state value.

• A function to update that state.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}