React Interview Questions Answers Set 3

 

1. Which console.log will execute first in this code?

The interviewer referred to a question similar to this:

const data = false;

if (data) {
  console.log("First");
}

if (new Boolean(false)) {
  console.log("Second");
}

Correct Answer

Output:

Second

Explanation

new Boolean(false) creates a Boolean object, not a primitive.

Objects in JavaScript are always truthy.

Example:

Boolean(false)        // false
new Boolean(false)    // object (truthy)

So the condition becomes:

if (true)

Therefore:

Second

is printed.

---

2. Can we apply loop over object?

Yes.

Two main ways:

1. for...in

Used to iterate object keys.

const user = {
  name: "Rahul",
  age: 25
}

for (let key in user) {
  console.log(key, user[key])
}

Output

name Rahul
age 25

---

2. Object.keys()

Object.keys(user).forEach(key => {
  console.log(key, user[key])
})

---

3. Difference between forEach and for...in

forEach

Used for arrays

const arr = [1,2,3]

arr.forEach(num => console.log(num))

Features

• Works only on arrays

• Cannot break or continue

• Returns undefined

---

for...in

Used for objects

for (let key in obj) {
  console.log(key)
}

Features

• Iterates over object keys

---

4. What is Single Source of Truth in Redux?

Answer

Redux keeps all application state in one central store.

Example:

Redux Store
   |
   |---- User State
   |---- Product State
   |---- Cart State

Benefits:

• predictable state management

• easier debugging

• centralized state

---

5. What is Reconciliation in React?

Answer

Reconciliation is the process React uses to update the DOM efficiently.

Steps:

1. React creates Virtual DOM

2. React compares new Virtual DOM with old one

3. Finds the difference (diffing algorithm)

4. Updates only changed elements in Real DOM

Example:

<h1>Hello</h1>

changes to

<h1>Hello Rahul</h1>

React updates only the text node, not the entire DOM.

---

6. What is Diffing Algorithm?

React compares two Virtual DOM trees using O(n) diffing algorithm.

Rules:

1. Different element types → re-render

2. Same element type → update attributes

3. React uses keys for list comparison

Example:

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

Keys help React identify which items changed.

---

7. What is React.memo?

React.memo prevents unnecessary re-rendering of components.

Example:

const Child = React.memo(({name}) => {
  console.log("render")
  return <h1>{name}</h1>
})

Component re-renders only if props change.

---

8. When should we use Context API vs Redux?

Context API

Use when:

• small or medium app

• few global states

• authentication

• theme

• language

Example:

AuthContext
ThemeContext

---

Redux

Use when:

• large applications

• complex state

• many components need same data

• advanced debugging

Example:

Ecommerce
Large dashboards
Enterprise apps

---

9. Why does React re-render?

React re-renders when:

State changes
Props change
Parent re-renders
Context value changes

Example:

setCount(count + 1)

Triggers re-render.

---

10. Why should hooks not be used inside loops or conditions?

React uses hook call order to track state.

Wrong:

if (true) {
  useState()
}

This breaks hook order.

Correct:

const [count, setCount] = useState(0)

Always at top level of component.