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:
-
React creates Virtual DOM
-
React compares new Virtual DOM with old one
-
Finds the difference (diffing algorithm)
-
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:
-
Different element types → re-render
-
Same element type → update attributes
-
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.