React Interview Questions

Answer: The Context API is React's built-in system for passing data down the component tree without manually threading props through intermediate layers (avoiding "prop drilling").

How it works:

1. React.createContext(defaultValue): Creates a Context object.
2. Provider: A component that wraps the component subtree and accepts a value prop.
3. useContext(Context): A hook that lets components subscribe to context changes.

When to use it: Use Context for global, low-frequency updates, such as user authentication state, UI themes (light/dark mode), active locales/languages, or shared multi-step wizard state.

The Performance Problem (Unnecessary Re-renders): Whenever the value of a Context Provider changes, all descendant components that consume that Context will re-render, even if they only use a subset of the context value that didn't change. Furthermore, if the Provider passes an object literal (e.g., value={{ state, dispatch }}), a new object reference is created on every render, triggering updates for all consumers.

How to optimize and prevent these re-renders:

1. Memoize the Value Object: Wrap the value passed to the Provider in useMemo so its reference remains stable unless the state changes.

   const contextValue = useMemo(() => ({ state, dispatch }), [state]);
   return <MyContext.Provider value={contextValue}>{children}</MyContext.Provider>;
   

2. Split Contexts: Separate state and dispatch into two different Contexts. This ensures that components that only dispatch actions (which never change) don't re-render when the state updates.
3. Use Component Splitting / Memoization: Wrap the direct consumer component in React.memo, or use child components passed as children (which React won't re-render unless their parent changes props).

---

Answer: useMemo and useCallback are optimization hooks designed to prevent expensive recalculations and unnecessary child component re-renders by caching values and function references.

1. useMemo(fn, deps):
   • Purpose: Memoizes the result of an expensive calculation.
   • How it works: Executes the function and caches the result. On subsequent renders, it returns the cached value unless the dependencies in the array change.
2. useCallback(fn, deps):
   • Purpose: Memoizes the function reference itself.
   • How it works: Returns the exact same function reference between renders unless its dependencies change. This is crucial when passing callback functions as props to memoized child components (React.memo) to avoid breaking prop-equality checks.
   • Note: useCallback(fn, deps) is syntactically equivalent to useMemo(() => fn, deps).

Performance Overhead & Overuse: Developers often fall into the trap of wrapping every function in useCallback and every computation in useMemo. This can actually hurt performance due to:

• Memory Overhead: Storing dependency arrays and closures in memory.
• CPU Overhead: Running a dependency comparison check (Object.is) on every single render.

When to use them:

• Use useMemo when performing complex computations (e.g., filtering or sorting arrays with thousands of items).
• Use useCallback when passing a callback to a child component optimized with React.memo, or when the function itself is a dependency in another hook (e.g., inside a useEffect).

---

Answer: The Virtual DOM diffing process determines how to update the real DOM when state changes. A generic tree comparison algorithm has a time complexity of $O(n^3)$. To achieve real-time performance, React uses a heuristic O(n) algorithm based on two main assumptions:

1. Two elements of different types will produce different trees. If React detects that a parent node has changed type (e.g., changing from <div> to <span>, or from a <Counter> component to a <Profile> component), it doesn't try to diff them. Instead, it tears down the entire subtree, destroys its state, and mounts a brand new tree from scratch.
2. The developer can hint at which child elements are stable across renders with a key prop. When comparing children of the same parent, React matches keys to map nodes from the old tree to the new tree. This allows it to efficiently detect when items are inserted, deleted, or reordered without rebuilding the entire list.

Reconciliation details for same-type elements: If two React elements are of the same type, React keeps the DOM node, updates only the changed attributes or CSS classes, and then recursively diffs their children.

---

Answer: A Custom Hook is a JavaScript function whose name starts with use and can call other React hooks. They are the primary mechanism in React for reusing stateful logic across multiple components.

Key characteristics:

• No Shared State: Custom hooks do not share state. Every time a component calls a custom hook, all state variables and effects inside that hook are initialized completely independently. They share behavior and logic, not data.
• Abstracting Complexity: They allow clean encapsulation of operations like fetching data, subscribing to window resizing, handling form inputs, or listening to keyboard events.

The Rules of Hooks (which custom hooks must also follow):

1. Only Call Hooks at the Top Level: Do not call hooks inside loops, conditions, or nested functions. This ensures React can maintain the correct hook call order across renders (internally, React relies on the exact array index of hook execution to match state variables to their hook calls).
2. Only Call Hooks from React Functions: Call them from React functional components or other custom hooks. Do not call them from plain JavaScript helper functions.

---

Answer: React Portals provide a way to render a component's virtual DOM tree into a physical DOM node that exists outside the parent component's DOM hierarchy.

ReactDOM.createPortal(child, containerNode)

Common Use Cases:

• Modals, tooltips, dialogs, and toast notifications. These elements often need to visual break out of their parent containers that might have styling like overflow: hidden, position: relative, or custom z-index stacking contexts.

Portals & Event Bubbling: Crucially, even though a portal component renders somewhere else in the physical DOM, it still behaves like a normal React child component in terms of React's event system. This means that:

• Events (like mouse clicks) fired inside a portal will still bubble up to the virtual React parent components, regardless of where they are in the physical HTML DOM. This allows parent components to capture events from portals seamlessly.

---

Answer: React Fiber is the complete rewriting of React's core reconciliation algorithm, released in React 16.

Why it was created: Before Fiber (the "Stack Reconciler"), React navigated the virtual DOM tree recursively. Once a render cycle started, it executed synchronously on the browser's main thread and could not be paused, aborted, or split. If the component tree was very large, a render cycle could take more than 16ms (the budget for 60fps), causing dropped frames, laggy input fields, and stuttering animations (commonly called "jank").

The Fiber Concept: A "Fiber" is a plain JavaScript object that represents a unit of work. It maps to a React element and a DOM node, but unlike elements, fibers are long-lived and mutable. They contain metadata about state, props, output, and references to other fibers (child, sibling, and return).

Cooperative Scheduling & Work Splitting: Fiber transforms the execution model from a call stack to a linked list traversal. This allows React to divide the rendering work into small chunks and yield execution back to the browser's main thread when necessary (cooperative scheduling), utilizing browser APIs like requestIdleCallback or React's custom scheduler.

The Two-Phase Lifecycle:

1. Render Phase (Asynchronous, Interruptible):
   • React traverses the fiber tree (linked list) to compute changes (diffing).
   • It builds a "work-in-progress" tree.
   • This phase is non-blocking and can be paused, discarded, or restarted if higher-priority work (like user keyboard inputs) enters the scheduler.
   • No physical side effects (DOM mutations) occur in this phase.
2. Commit Phase (Synchronous, Uninterruptible):
   • React takes the completed work-in-progress tree (the "effects list") and applies changes to the actual DOM.
   • This phase must execute synchronously in a single pass to prevent user-facing UI inconsistencies (flickering).
   • Lifecycle methods like componentDidMount, componentDidUpdate, and effects like useLayoutEffect and useEffect are scheduled or fired here.

---

Answer: Concurrent Rendering is not a feature in itself but an underlying capability of React 18 that enables the UI to be interruptible.

1. Priority Lanes: React internally uses a 32-bit bitmask system called Lanes to assign priorities to different types of updates:

• SyncLane: For immediate interactive inputs (e.g., text inputs, clicking buttons).
• TransitionLane: For transitions that can afford to wait (e.g., filtering a large list, switching tabs).
• DefaultLane: For standard state updates.
• OffscreenLane: For background rendering.

2. Transitions (useTransition and useDeferredValue):

• useTransition: Returns an isPending boolean and a startTransition function. Wrapping a state-setting callback in startTransition tells React to treat that update as low priority (TransitionLane). If a user starts typing while a transition-driven render is in progress, React halts the transition render, processes the keystroke, and then restarts the transition render in the background.
• useDeferredValue: Takes a state value and returns a deferred copy of it. It delays rendering the deferred value until the main thread is idle, which is useful when customizing performance with third-party libraries where you cannot directly wrap state updates in useTransition.

3. "Tearing" & useSyncExternalStore:

• Tearing occurs when a visual discrepancy is displayed on-screen because different parts of the UI render with different versions of the same state during a single repaint.
• Tearing became a serious risk with Concurrent Rendering when reading from external stores (like Redux, Zustand, or global browser APIs like window.innerWidth). Because concurrent renders can pause and yield back to the main thread, an external event could modify the external store mid-render, causing components rendered later in the tree to read the new value while early-rendered components read the old value.
• To solve this, React 18 introduced useSyncExternalStore, which guarantees synchronous consistency by forcing updates to fall back to a synchronous, non-interruptible render if an external store update occurs during a concurrent render cycle.

---

Answer: Hydration is the process where client-side React takes over static HTML elements rendered on the server, attaches event listeners, and sets up state/effects, transforming it into a fully interactive single-page application.

Selective Hydration (React 18): In older React versions, hydration was "all-or-nothing". The entire page's JS code had to load, and then the entire page had to hydrate before any element became interactive. In React 18, wrapping slow-loading components in <Suspense> allows React to stream HTML from the server and perform Selective Hydration:

1. It hydrates components that have loaded code without waiting for the rest of the page.
2. If a user clicks a button in a non-hydrated component, React recognizes the click as high priority, pauses ongoing hydration elsewhere, and prioritizes hydrating that exact clicked component first (event-driven hydration).

Hydration Mismatches: A hydration mismatch occurs when the server-rendered HTML tree is structure-wise or content-wise different from what the client's React engine produces on its initial render.

• Common Causes:
  • Using browser-only variables (e.g., window, localStorage, or document) during the initial render phase.
  • Outputting non-deterministic data like dates (new Date()) or random numbers (Math.random()) on initial render without synchronization.
  • Invalid HTML markup structure (e.g., nesting a <div> inside a <p>), which causes the browser to automatically correct the DOM structure, creating a mismatch with React's expectation.
• How to fix:
  • Use useEffect to trigger client-only rendering changes after mounting.
  • For intentional differences, use the suppressHydrationWarning prop on the matching HTML element (use sparingly!).

---

Answer: When a state update is triggered (e.g., calling setCount), React does not calculate the next state immediately. Instead, it creates an Update Object containing:

• The next value or update function (e.g., prev => prev + 1).
• The update's priority Lane.
• A reference link to the next update object (forming a circular linked list queue).

Under the hood steps:

1. Queueing: React appends the update object to the Fiber's updateQueue.
2. Scheduling: React schedules a work cycle for the root of the fiber tree with the priority matching the lanes of the update queue.
3. Execution (Render Phase):
   • When the scheduler executes this fiber, React traverses the updateQueue.
   • It skips updates whose lanes are lower-priority than the current render's active Lane.
   • It computes the cumulative state by sequentially applying all high-priority updates.
   • Critical Optimization (Interleaved Updates): If a skipped update was in the middle of the queue, React remembers the state before that update, so that in the next low-priority render cycle, it can re-apply all updates in the correct chronological order, ensuring state remains accurate.
4. Re-conciliation & DOM Commit: The final state is compared to the current DOM, and necessary changes are applied in the Commit Phase.

---

• beginWork (downward pass): for each fiber React checks bailout conditions (props unchanged + no forced update/context dirt) - bailing returns the cached alternate subtree instantly. Otherwise it invokes the component function, reconciles returned elements against current children (reconcileChildFibers), tagging work: Placement/Update/Deletion, and clones fibers into the workInProgress tree preserving alternate links.
• completeWork (upward pass): finalizes host fibers - diffs old/new props into an update payload queue, computes childLanes/subtreeFlags bitmask rollups so ancestors know whether subtrees contain pending work (enables early exits), and stitches firstEffect/nextEffect linked lists collecting mutation/layout effects instead of traversing again later.
• Deletions attach to deletions array processed in commit; text/host updates bundle into minimal DOM ops.
• Interview depth signal: explain how subtreeFlags lets the commit phase skip entire clean subtrees, and how alternates get reused (double buffering) across renders.