React.js UI Library Interview Preparation Guide

The Virtual DOM is a lightweight JavaScript object representation of the actual DOM tree. Direct manipulation of the browser DOM is notoriously slow because every mutation triggers expensive layout calculations, style recalculations, and repaints by the browser engine. React maintains a virtual representation in memory, performs fast diffing algorithms (reconciliation) on the virtual nodes, and batches minimal mutations before committing them to the actual DOM in a single pass. This dramatically reduces layout thrashing and ensures smooth 60 FPS UI performance in complex applications.

While both hooks are used for memoization to prevent redundant calculations and unnecessary child re-renders, they serve distinct purposes. useMemo invokes a provided creation function and caches its return value, recalculating only when dependencies change—making it ideal for expensive mathematical transformations or data filtering. In contrast, useCallback caches and returns the function definition itself rather than its execution result. This is primarily used to maintain referential stability for callback functions passed to memoized child components, preventing them from breaking shouldComponentUpdate or React.memo checks.

React relies strictly on the order in which hooks are called during every component render pass to associate state and effect arrays with their corresponding Fiber nodes. Under the hood, React maintains an internal linked list of hooks per component fiber. If hooks were placed inside conditional statements or loops, the execution order could vary between renders, causing React's index pointer to misalign state variables. This would result in catastrophic state corruption, where a component's state variables map to completely wrong hooks.

Traditional SSR renders React components into HTML strings on the server, sends that HTML to the client for initial display, and then downloads and hydrates the full client JavaScript bundle to make the page interactive. RSCs, however, execute entirely on the server and stream serialized component payloads (not HTML strings) directly to the client. Server components never ship their JavaScript code to the client browser, resulting in zero client-side bundle size contribution for backend-heavy logic like database queries or markdown parsing, while client components handle interactivity.

When rendering lists, React's diffing algorithm compares the children of an array element by iterating through both lists simultaneously. Without stable keys, React relies solely on index positions. If an item is inserted at the beginning of a list, every subsequent item shifts index, causing React to mistakenly identify existing DOM nodes as updated with new data rather than repositioned. This leads to broken input focus, corrupted component local state, and severe rendering inefficiencies. Stable keys (such as UUIDs or database primary keys) allow React to track item identity precisely across reorders.

Controlled components maintain form input state directly within React component state using useState. Every keystroke triggers an event handler that updates state, causing a re-render where the input's value prop is fed back from state—providing instant validation and formatting control at the cost of minor render overhead. Uncontrolled components store their own state directly within the DOM nodes. React accesses these values imperatively when needed using useRef hooks. Uncontrolled components are exceptionally performant for massive forms with minimal validation requirements.

Error Boundaries are React components implementing static getDerivedStateFromError and componentDidCatch lifecycle methods that intercept JavaScript errors anywhere in their child component subtree, isolating the crash and displaying a fallback UI. However, Error Boundaries cannot catch errors thrown inside asynchronous code (such as setTimeout or async/fetch callbacks), server-side rendering execution, or event handlers. For asynchronous operations, developers must rely on standard try-catch blocks and explicit error state management.

Concurrent Mode empowers React to prepare multiple versions of a UI tree simultaneously without committing them immediately to the DOM. By breaking rendering work down into small units using Fiber architecture, React can interrupt ongoing low-priority rendering passes (like data visualization updates) to immediately process high-priority user interactions (like typing in an input or clicking a button). This eliminates main-thread blocking, ensuring applications remain fluid and responsive under heavy computational workloads.

While React Context is excellent for low-frequency global data like themes or authentication tokens, it lacks granular subscription mechanisms. When a Context value updates, every single consuming component re-renders regardless of whether it uses the changed property. Dedicated state management libraries like Redux Toolkit or Zustand offer optimized selector hooks that ensure components re-render only when their specific selected slice of state changes, avoiding unnecessary renders across large component trees.

Memory leaks in useEffect typically occur when an asynchronous operation (such as a fetch request or setInterval) completes and attempts to update component state after the component has already unmounted. To resolve this, developers should use an AbortController to cancel inflight fetch requests inside the effect's cleanup return function, or track a boolean isMounted flag. When the cleanup function executes upon unmounting, it flags the component as unmounted, preventing subsequent state setter invocations from executing.

Prop drilling refers to the anti-pattern of passing data down through multiple nested intermediate component layers via props solely to make that data accessible to a deeply nested child component. This tightly couples intermediate components to data they do not care about. Prop drilling is effectively eliminated using React Context for dependency injection of shared static data, or dedicated state management libraries (Zustand, Redux) for reactive global state access.

React relies on immutable data structures and reference equality checks (Object.is) to determine whether component state or props have changed between renders. If a developer mutates an existing state object or array directly (e.g., state.items.push(newItem)), the memory reference of the object remains identical. Consequently, React's reconciliation engine bypasses re-rendering because it assumes no changes occurred, leaving the user interface completely out of sync with the underlying data.