React Interview Questions

Answer: The Virtual DOM is a lightweight JavaScript object tree that mirrors the actual DOM. When state changes:

1. React creates a new Virtual DOM tree representing the updated UI.
2. It diffs the new tree against the previous one using its reconciliation algorithm.
3. It computes the minimum set of DOM mutations needed.
4. It batches and applies only those mutations to the real DOM.

React uses two key heuristics: (1) elements of different types produce different trees, and (2) the key prop hints which children are stable across renders.

Answer:

• Controlled components: Form input values are driven by React state. The component's value prop is set to state, and an onChange handler updates the state. React is the single source of truth.
• Uncontrolled components: Form input values are managed by the DOM itself. You access the value via a ref (e.g., inputRef.current.value). Useful for simple forms or integrating with non-React code.

Trade-off: Controlled components give you full control (validation, formatting, conditional disabling) but require more boilerplate. Uncontrolled components are simpler but offer less control.

Answer: There are two rules:

1. Only call hooks at the top level — never inside loops, conditions, or nested functions.
2. Only call hooks from React functions — either function components or custom hooks.

Why: React relies on the order in which hooks are called to associate each hook with its internal state slot. If a hook is called conditionally, the order changes between renders, and React maps the wrong state to the wrong hook.

Answer:

• useEffect: Runs asynchronously after the browser paints. Used for side effects like API calls, subscriptions, and DOM measurements that don't need to block painting.
• useLayoutEffect: Runs synchronously after DOM mutations but before the browser paints. Used for DOM measurements that must happen before the user sees the screen (e.g., measuring element dimensions for positioning).
• useMemo: Caches a computed value between renders. It runs during rendering, not after. It is not for side effects — it is for avoiding expensive recalculations.

Answer: Keys help React identify which items in a list have changed, been added, or been removed during reconciliation. Without stable keys, React cannot efficiently reuse existing DOM nodes.

Using array index as the key is problematic when the list order changes (items are added, removed, or reordered). React associates component state with the key — if a key's position changes but the key stays the same (because it's just the index), React reuses the wrong component instance, causing stale state and visual bugs.

Best practice: Use a stable, unique identifier from your data (like a database ID) as the key.

Diagnosis: Use React DevTools Profiler to identify which components are re-rendering and why. Common causes:

1. Parent passes a new object/array/function reference on every render (e.g., inline style={{...}} or onClick={() => ...}).
2. Context value changes cause all consumers to re-render.

Remediation:

• Wrap the child component in React.memo() to skip re-renders when props haven't changed.
• Stabilize callback references using useCallback.
• Memoize object/array props using useMemo.
• Split context into smaller, focused contexts so changes don't cascade to unrelated consumers.

Diagnosis: An infinite loop occurs when useEffect modifies a value that is also in its dependency array, causing the effect to re-trigger itself endlessly.

Common pattern:

Answer: React Fiber is the internal reconciliation engine introduced in React 16. It replaces the older stack-based reconciler with an incremental rendering architecture that can:

• Pause and resume work: Break rendering into small units of work, yielding to the browser between chunks to maintain 60fps responsiveness.
• Assign priorities: User interactions (like typing) get higher priority than background updates (like data fetching).
• Abort outdated work: If a higher-priority update arrives, Fiber can abandon in-progress low-priority work and restart.

This enables features like Concurrent Mode, Suspense, and Transitions.

Answer:

• React.memo: A higher-order component that wraps a component. It skips re-rendering if props haven't changed (shallow comparison). It memoizes the component output.
• useMemo: A hook that caches a computed value between renders. It recomputes only when its dependencies change.
• useCallback: A hook that caches a function reference between renders. It is equivalent to useMemo(() => fn, deps). Used to prevent child re-renders when passing callbacks as props.

Summary: React.memo = memoize a component. useMemo = memoize a value. useCallback = memoize a function.

Answer: State batching combines multiple setState calls into a single re-render for performance.

• React 17 and earlier: Batching only worked inside React event handlers. State updates inside setTimeout, fetch.then(), or native event listeners triggered separate re-renders for each setState call.
• React 18 (Automatic Batching): All state updates are batched regardless of where they originate — inside timeouts, promises, native event handlers, or any other context. This reduces unnecessary re-renders automatically.

To opt out of batching in React 18, use flushSync() from react-dom.