WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

React Interview Questions

Previous Next

1. What is the Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM. React uses it to track changes in the UI. When a component's state changes, React creates a new virtual DOM tree and compares it with the previous one (diffing). Then it updates only the parts of the real DOM that changed, improving performance.

Why use the Virtual DOM?

✅ Direct manipulation of the real DOM is slow

✅ React uses the VDOM to minimize DOM updates

✅ This makes apps faster and more efficient

How React Uses the Virtual DOM:

  1. You build a UI using React components.
  2. React renders a virtual DOM tree from your components.
  3. When state/props change, React:
  • Creates a new virtual DOM.
  • Compares it to the previous one (diffing).
  • Finds what changed.
  • Efficiently updates only the changed parts in the real DOM.


Demo: Visual Code Explanation
import React, { useState } from 'react';

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

return (
<div>
<h2>Counter: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}

What Happens Internally?

1.First render → VDOM:

<h2>Counter: 0</h2>


2.You click the button → count becomes 1

New VDOM:

<h2>Counter: 1</h2>


3.React compares old and new VDOM, finds the text difference in <h2>, and updates only that part in the real DOM.

✅ Fast

✅ Efficient

✅ Smooth UI



Bonus: Without Virtual DOM (Vanilla JS Example)
<button onclick="increase()">Increase</button>
<h2 id="count">0</h2>

<script>
let count = 0;
function increase() {
count++;
document.getElementById("count").innerText = count;
}
</script>

2. What are controlled vs uncontrolled components?

Controlled components have their state managed by React (via useState or this.state). Their values are updated through props or state. Uncontrolled components rely on the DOM to manage state, often using useRef to access values.

Feature

Controlled Component

Uncontrolled Component

Data stored in

React state

DOM (via ref)

React controls input?

✅ Yes

❌ No

Easier to validate?

✅ Yes

❌ Harder

Use case

Most React forms

Simple or legacy forms

Controlled Component

In a controlled component, the input's value is tied to React state. You control the value using useState.

import React, { useState } from "react";

function ControlledInput() {
const [name, setName] = useState("");

const handleChange = (e) => {
setName(e.target.value);
};

return (
<div>
<h2>Controlled Input</h2>
<input type="text" value={name} onChange={handleChange} />
<p>You typed: {name}</p>
</div>
);
}

Uncontrolled Component

In an uncontrolled component, the input's value is stored in the DOM, and you access it via a ref.

import React, { useRef } from "react";

function UncontrolledInput() {
const inputRef = useRef();

const handleSubmit = () => {
alert("Input Value: " + inputRef.current.value);
};

return (
<div>
<h2>Uncontrolled Input</h2>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>Show Value</button>
</div>
);
}
Combined Demo (Full App)
import React, { useState, useRef } from "react";

export default function App() {
const [controlledValue, setControlledValue] = useState("");
const uncontrolledRef = useRef();

return (
<div style={{ padding: "20px" }}>
<h1>Controlled vs Uncontrolled</h1>

<div style={{ marginBottom: "30px" }}>
<h2>Controlled Input</h2>
<input
type="text"
value={controlledValue}
onChange={(e) => setControlledValue(e.target.value)}
/>
<p>You typed: {controlledValue}</p>
</div>

<div>
<h2>Uncontrolled Input</h2>
<input type="text" ref={uncontrolledRef} />
<button onClick={() => alert("Uncontrolled: " + uncontrolledRef.current.value)}>
Show Value
</button>
</div>
</div>
);
}

3. What is the difference between useEffect, useLayoutEffect, and useInsertionEffect?

Hook

When it runs

Use case

useEffect

After render (painted on screen)

Side effects like API calls

useLayoutEffect

After DOM mutations but before paint

Measure DOM size/layout before painting

useInsertionEffect

Before DOM mutations (CSS only)

Injecting styles (like Emotion, styled-components)

useEffect – Normal Side Effects

  • API calls
  • Subscriptions
  • Analytics
  • Logging
useEffect(() => {
console.log("✅ useEffect - runs after paint");
}, []);

useLayoutEffect – Synchronous Side Effects

  • Reading layout (getBoundingClientRect)
  • Preventing flicker
  • Scroll positioning
useLayoutEffect(() => {
console.log("⚠️ useLayoutEffect - runs before paint (can block UI)");
}, []);

useInsertionEffect – CSS Injection (⚠️ Rarely used)

  • Injecting styles dynamically (used by styled-components/emotion)
  • Avoiding flickering when injecting CSS
useInsertionEffect(() => {
console.log("🧵 useInsertionEffect - for injecting styles before layout");
}, []);
Full Code
import React, {
useEffect,
useLayoutEffect,
useInsertionEffect,
useState
} from "react";

export default function App() {
const [count, setCount] = useState(0);

useInsertionEffect(() => {
console.log("🧵 useInsertionEffect called");
}, [count]);

useLayoutEffect(() => {
console.log("⚠️ useLayoutEffect called");
}, [count]);

useEffect(() => {
console.log("✅ useEffect called");
}, [count]);

return (
<div style={{ padding: "20px" }}>
<h1>React Hooks Order Demo</h1>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
<p>Count: {count}</p>
</div>
);
}
Console Output (when you click the button):
🧵 useInsertionEffect called → First (before DOM changes)
⚠️ useLayoutEffect called → Next (after DOM changes but before painting)
✅ useEffect called → Last (after painting to screen)