React Interview Questions Set 2

 

1. Why do we get Uncaught ReferenceError in JavaScript?

Answer

This error occurs when we try to access a variable that is not defined or not initialized.

Example:

console.log(a)
let a = 5

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization

Reason:

• Because of Temporal Dead Zone (TDZ) with let and const.

Another example:

console.log(x)

If x is never declared → ReferenceError.

---

2. Does IIFE get Hoisted?

Answer

No.

IIFE (Immediately Invoked Function Expression) is not hoisted because it is a function expression.

Example:

(function(){
 console.log("Hello")
})();

Function declarations are hoisted, but function expressions are not.

---

3. How does JavaScript Work? (Call Stack & Event Loop)

JavaScript runtime has these components:

Call Stack
Web APIs
Callback Queue
Event Loop

Step-by-step flow

1. Code runs in Call Stack

2. Async tasks go to Web APIs

3. Results go to Callback Queue

4. Event Loop pushes tasks back to Call Stack

Example:

console.log("Start")

setTimeout(()=>{
 console.log("Timeout")
},0)

console.log("End")

Output:

Start
End
Timeout

Reason: setTimeout goes to Web API → Queue → Event Loop.

---

4. What is Object Prototyping?

JavaScript uses prototype-based inheritance.

Every object inherits properties from another object called prototype.

Example:

const person = {
 greet(){
  console.log("Hello")
 }
}

const user = Object.create(person)

user.greet()

Output:

Hello

user inherits from person.

---

5. JavaScript Middleware (in Redux)

Middleware intercepts actions before they reach the reducer.

Flow:

Component
 ↓
Dispatch Action
 ↓
Middleware
 ↓
Reducer
 ↓
Store

Example middleware:

Redux Thunk
Redux Saga
Redux Logger

Example:

const fetchData = () => async(dispatch)=>{
 const res = await fetch("/api")
 dispatch({type:"SET_DATA",payload:res})
}

---

6. Redux Toolkit vs Redux

Problem in Redux

Too much boilerplate.

Files needed:

actions.js
reducers.js
constants.js
store.js

Redux Toolkit solves this

Features:

createSlice()
configureStore()
createAsyncThunk()

Example:

const counterSlice = createSlice({
 name:"counter",
 initialState:{value:0},
 reducers:{
  increment:(state)=>{
   state.value++
  }
 }
})

Benefits:

• Less code

• Built-in immutability (Immer)

• Built-in thunk support

---

7. How to Call Function When Count = 5 (Without If Else)

Using useEffect.

Example:

const [count,setCount] = useState(0)

useEffect(()=>{
 if(count===5){
  alert("Count is 5")
 }
},[count])

count is dependency → effect runs when count changes.

---

8. What are Pure Components?

A Pure Component re-renders only when props or state change.

It performs shallow comparison.

Class component example:

class MyComponent extends React.PureComponent {
 render(){
  return <h1>Hello</h1>
 }
}

In functional components we achieve similar behavior using:

React.memo()

Example:

export default React.memo(MyComponent)

---

9. What are React Portals?

React Portal allows rendering components outside the root DOM tree.

Common use cases:

Modals
Tooltips
Popups
Dropdown overlays

Example:

ReactDOM.createPortal(
 <Modal />,
 document.getElementById("modal-root")
)

---

10. What is Code Splitting?

Code splitting divides application bundle into smaller chunks.

This improves performance and load time.

Example:

const Dashboard = React.lazy(()=>import("./Dashboard"))

Combined with:

<Suspense fallback={<Loading/>}>
 <Dashboard/>
</Suspense>

---

11. What are React Profilers?

React Profiler is used to measure performance of components.

It helps detect:

Slow renders
Unnecessary re-renders
Performance bottlenecks

Example:

<Profiler id="App" onRender={callback}>
 <App/>
</Profiler>

---

12. What are Render Props?

Render Props is a pattern where a component receives a function as a prop to render UI.

Example:

<DataProvider render={(data)=>(
 <h1>{data}</h1>
)}/>

Used for:

Reusable logic
State sharing

---

13. Can We Use Hooks in Variables?

Hooks must follow rules:

Only inside React functional components
Only at top level
Not inside loops or conditions

Wrong:

if(true){
 useState()
}

Correct:

const [count,setCount] = useState(0)

---

14. Can We Focus Input Without useRef?

Yes using DOM selector (not recommended in React):

document.getElementById("input").focus()

But React best practice:

useRef()

---

15. Why Avoid Prop Drilling?

Prop drilling occurs when props are passed through many components.

Example:

A → B → C → D → E

Even if only E needs the data.

Solution:

Context API
Redux
Zustand