React.js Interview Questions

One-way data flow means data moves in a single direction: from parent components to child components through props. This makes applications easier to understand, debug, and maintain because the source of data is predictable.

Example

function Parent() {
  const name = "Bhuvanesh";

  return <Child name={name} />;
}

function Child(props) {
  return <h1>{props.name}</h1>;
}

In this example, Parent passes data to Child, but Child cannot directly change the parent's data.

Summary: React follows one-way data flow where data travels from parent to child via props, making state changes predictable and easier to manage.

The Virtual DOM is a lightweight JavaScript representation of the real DOM. When data changes, React first updates the Virtual DOM, compares it with the previous version, and then updates only the changed parts of the real DOM. This improves performance.

Example

If a counter changes from 1 to 2, React updates only the text displaying the count instead of re-rendering the entire page.

Flow

1. State or props change

2. React creates a new Virtual DOM

3. React compares it with the previous Virtual DOM (diffing)

4. Only the necessary changes are applied to the real DOM

Summary: The Virtual DOM helps React update the UI efficiently by minimizing direct changes to the real DOM.

Reconciliation is the process React uses to determine what has changed in the UI and update the real DOM efficiently. When state or props change, React creates a new Virtual DOM, compares it with the previous one (diffing), and updates only the changed parts of the real DOM.

Example

If a list contains:

<li>Apple</li>
<li>Banana</li>

and a new item is added:

<li>Apple</li>
<li>Banana</li>
<li>Orange</li>

React updates only the new <li> instead of re-rendering the entire list.

Key Points

• Uses Virtual DOM comparison (diffing)

• Identifies the minimum required changes

• Updates only affected DOM elements

• Improves rendering performance
  

Summary: Reconciliation is React's process of comparing old and new Virtual DOM trees and applying only the necessary updates to the real DOM.

Diffing is the process React uses to compare the new Virtual DOM with the previous Virtual DOM to find what has changed. Based on these differences, React updates only the affected parts of the real DOM instead of re-rendering everything.

Example

Before:

<h1>Hello</h1>

After:

<h1>Hello Bhuvanesh</h1>

React detects that only the text content changed and updates just that text node in the real DOM.

Key Points

• Happens during reconciliation

• Compares old and new Virtual DOM trees

• Finds the minimum number of changes

• Improves performance by avoiding unnecessary DOM updates

Summary: Diffing is React's comparison process that identifies changes between two Virtual DOM versions so only the necessary updates are made to the real DOM.

Keys help React identify which items in a list have been added, removed, or updated. This allows React to update only the affected items instead of re-rendering the entire list, improving performance and preserving component state.

Example

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Alice" }
];

users.map(user => (
  <li key={user.id}>{user.name}</li>
));

Why Keys Matter

• Identify each list item uniquely

• Help React during diffing and reconciliation

• Improve rendering performance

• Prevent incorrect UI updates

Best Practice

Use a stable, unique ID as the key:

key={user.id}

Avoid using array indexes as keys when the list can change order.

key={index} // Not recommended for dynamic lists

Summary: Keys give list items a unique identity, helping React efficiently track changes and update the UI correctly.

Stable keys help React consistently identify each item in a list across re-renders. If keys change unexpectedly (such as using array indexes in a dynamic list), React may reuse the wrong components, causing incorrect UI updates or loss of component state.

Example

Good:

users.map(user => (
  <UserCard key={user.id} user={user} />
));

Not Recommended:

users.map((user, index) => (
  <UserCard key={index} user={user} />
));

If an item is inserted or removed, index-based keys can change and confuse React.

Benefits of Stable Keys

• Correctly track list items

• Preserve component state

• Improve rendering performance

• Prevent unexpected UI behavior

Summary: Stable keys give each list item a permanent identity, allowing React to update lists accurately and efficiently.

Using array indexes as keys can cause React to identify items incorrectly when the list changes. If items are added, removed, or reordered, React may reuse the wrong components, leading to UI bugs and lost state.

Example

Initial list:

["Apple", "Banana", "Orange"]

Keys:

0, 1, 2

After removing "Apple":

["Banana", "Orange"]

New keys:

0, 1

React may think "Banana" is the old "Apple" because they now share the same key.

Problems

• Incorrect UI updates

• Component state gets mixed up

• Input fields may show wrong values

• Unnecessary re-renders

• Bugs when items are reordered

When Is It Acceptable?

Using indexes is usually safe only when:

• The list is static

• Items are never added, removed, or reordered

Summary: Array indexes are unstable keys in dynamic lists. They can cause React to match the wrong items, resulting in rendering and state-related bugs.

Fragments let you group multiple elements together without adding an extra DOM element like a <div>. They help keep the DOM cleaner and avoid unnecessary wrapper elements.

Example

Without Fragment:

function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  );
}

With Fragment:

function App() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
  );
}

Short Syntax

function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

Why Use Fragments?

• Avoid unnecessary <div> wrappers

• Keep the DOM cleaner

• Improve readability

Summary: Fragments allow a component to return multiple elements without creating extra nodes in the DOM.

Conditional rendering is the technique of displaying different UI elements based on a condition. React uses normal JavaScript conditions (if, ternary operator, &&) to decide what should be rendered.

Example (Ternary Operator)

function App() {
  const isLoggedIn = true;

  return (
    <h1>
      {isLoggedIn ? "Welcome Back!" : "Please Login"}
    </h1>
  );
}

Example (&& Operator)

function App() {
  const showMessage = true;

  return (
    <>
      {showMessage && <p>Hello User!</p>}
    </>
  );
}

Common Uses

• Show/hide elements

• Display loading states

• Show error messages

• Render content based on user permissions

Summary: Conditional rendering allows React components to display different UI based on data or application state.

React supports several common patterns for conditional rendering.

1. If Statement

Use when rendering logic is more complex.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome</h1>;
  }

  return <h1>Please Login</h1>;
}

2. Ternary Operator (? :)

Use for simple if-else rendering.

<h1>
  {isLoggedIn ? "Welcome" : "Please Login"}
</h1>

3. Logical AND (&&)

Render something only when a condition is true.

{isAdmin && <button>Delete</button>}

4. Early Return

Return different UI before the main render.

if (loading) {
  return <p>Loading...</p>;
}

return <Dashboard />;

5. Variable Assignment

Store JSX in a variable and render it later.

let content;

if (isLoggedIn) {
  content = <Dashboard />;
} else {
  content = <Login />;
}

return content;

Summary: The most common conditional rendering patterns are if statements, ternary operators, &&, early returns, and variable assignment. Choose the one that keeps the code simplest and most readable.