React Interview Questions

The Virtual DOM is a lightweight, in-memory representation of the real DOM tree stored as a JavaScript object. When state or props change, React creates a new Virtual DOM tree, diffs it against the previous one using its reconciliation algorithm, and applies only the minimal set of changes to the real DOM. This batch-update approach is significantly faster than directly manipulating the DOM on every state change because real DOM operations are expensive.

A controlled component's form data is managed by React state — the input value is set via the 'value' prop and changes are handled via onChange. An uncontrolled component stores its own state internally in the DOM; you access values using a ref. Controlled components give you instant validation and the ability to conditionally disable buttons. Uncontrolled components are simpler for basic forms or when integrating with non-React code.

The 'key' prop is a stable, unique identifier that React uses during reconciliation to match elements between renders. When list items reorder, add, or remove, React uses keys to determine whether to reuse an existing DOM node or create a new one. Using an item's array index as a key is an anti-pattern when the list can reorder, because it causes unnecessary re-renders and can corrupt component state.

Hooks are functions that let you 'hook into' React state and lifecycle features from functional components. Before hooks (React < 16.8), stateful logic required class components, making reuse difficult. Hooks allow stateful logic to be extracted into custom hooks and shared across components without changing component hierarchy. The rules of hooks (only call at the top level, only call from React functions) ensure consistent state across renders.

useEffect can return a cleanup function that React calls before the component unmounts and before the effect re-runs on the next render. This is essential for: cancelling async operations (abort controllers, active flags), clearing timers and intervals, removing event listeners, and closing WebSocket connections. Failing to clean up is a common cause of memory leaks and stale state bugs.

React provides three memoisation APIs: React.memo wraps a component and skips re-renders if props are shallowly equal. useMemo caches the result of an expensive computation between renders. useCallback caches a function reference so it doesn't change identity between renders (preventing child re-renders when the callback is a prop). You should use these when you've measured a real performance problem — premature memoisation adds complexity and can mask bugs.

Context provides a way to pass data through the component tree without prop-drilling. You create a context with React.createContext, provide a value with a Provider, and consume it with useContext. However, every component that consumes a context re-renders when the context value changes — even if the component only uses part of the value. For frequently-changing data (mouse position, every keystroke), Context causes performance issues and a dedicated state manager (Zustand, Redux) is better.

React Fiber is the complete rewrite of React's core reconciliation algorithm shipped in React 16. The old 'stack reconciler' processed updates synchronously and couldn't be interrupted, causing dropped frames on heavy updates. Fiber breaks rendering work into small units (fibers) that can be paused, prioritised, resumed, and aborted. This enables Concurrent Mode features like Suspense, startTransition (marking updates as non-urgent), and Time Slicing.

Both run after a render, but at different times. useEffect fires asynchronously after the browser has painted. useLayoutEffect fires synchronously after DOM mutations but BEFORE the browser paints, just like componentDidMount/componentDidUpdate. Use useLayoutEffect when you need to read DOM measurements (getBoundingClientRect) and update state before the user sees the intermediate render — for example, calculating a tooltip position. Overusing it can cause visual jank.

Key optimisation strategies: (1) Code splitting with React.lazy and Suspense to reduce initial bundle size. (2) Memoisation with React.memo, useMemo, useCallback where measured. (3) Virtualising long lists with react-window or react-virtual. (4) Avoiding unnecessary state — compute values instead of storing them. (5) Moving state down — global state causes top-level re-renders. (6) Using production build and analysing bundle with webpack-bundle-analyzer. (7) Prefetching critical data. Always measure with React DevTools Profiler before optimising.