Prepare for React interviews with questions on hooks, state management, component lifecycle, rendering optimization, and modern patterns.
The virtual DOM is a lightweight JavaScript representation of the actual DOM that React uses to optimize updates. When state changes, React creates a new virtual DOM tree, diffs it against the previous one (reconciliation), and applies only the minimal set of changes to the real DOM. This batched approach is significantly faster than manipulating the real DOM directly for most use cases.
useState is ideal for simple, independent state values where updates are straightforward. useReducer is better suited for complex state logic involving multiple sub-values or when the next state depends on the previous one, as it centralizes update logic in a reducer function. useReducer also makes state transitions more predictable and testable.
useEffect runs side effects after rendering, such as data fetching, subscriptions, or DOM manipulation. The dependency array controls when the effect re-runs: an empty array means it runs once on mount, and specific dependencies trigger it when those values change. The cleanup function returned from useEffect runs before the component unmounts and before each re-execution of the effect.
React's reconciliation algorithm compares two virtual DOM trees using two key heuristics: elements of different types produce different trees (and old trees are fully replaced), and keys on list items help React identify which elements have been added, removed, or moved. This reduces the comparison from O(n^3) to O(n) complexity, making updates efficient even for large component trees.
Controlled components have their form data managed by React state, where the component renders the current state and updates it via onChange handlers. Uncontrolled components store their data in the DOM itself, accessed via refs when needed. Controlled components give you more control for validation and conditional rendering, while uncontrolled components are simpler for basic forms.
React.memo is a higher-order component that memoizes a functional component, preventing re-renders when its props have not changed (using shallow comparison by default). It should be used when a component renders frequently with the same props, especially if its render logic is expensive. Overusing React.memo adds overhead from the comparison itself, so it is not beneficial for components that almost always receive new props.
useMemo memoizes the result of an expensive computation, recalculating only when its dependencies change. useCallback memoizes a function reference, ensuring the same function instance is returned across renders unless dependencies change. Both are performance optimizations primarily useful when passing values or callbacks to memoized child components to prevent unnecessary re-renders.
React Context provides a way to pass data through the component tree without manually threading props at every level. You create a context with createContext, provide values with a Provider component, and consume them with useContext. Its main limitation is that any change to the context value causes all consuming components to re-render, which can lead to performance issues in large applications.
React Server Components (RSC) are components that render exclusively on the server and send their output as a serialized format to the client, reducing the JavaScript bundle size. They can directly access server-side resources like databases and file systems without API endpoints. Client components are marked with 'use client' and handle interactivity, while server components handle data fetching and static rendering.
Hooks must only be called at the top level of a function component or custom hook, never inside loops, conditions, or nested functions. This rule ensures React can correctly associate hook state with each component instance across renders. Hooks must also only be called from React function components or custom hooks, not from regular JavaScript functions.
useState triggers a re-render when its value is updated, while useRef holds a mutable value in its .current property that persists across renders without causing re-renders. useRef is commonly used for accessing DOM elements, storing previous values, and keeping mutable values like timers or interval IDs. Unlike state, ref changes are available immediately rather than on the next render.
Suspense lets you declaratively specify a loading fallback UI while child components are waiting for asynchronous data or lazy-loaded code. When a component inside a Suspense boundary throws a promise (suspends), React shows the fallback until the promise resolves, then re-renders the component with the data. It integrates with React.lazy for code splitting and with data-fetching libraries that support the Suspense protocol.
Prop drilling is the practice of passing data through multiple intermediate components that do not use the data themselves, just to reach a deeply nested component. It makes code harder to maintain and refactor. Common solutions include React Context, state management libraries like Redux or Zustand, and component composition patterns where you pass components as props or children.
useTransition marks state updates as non-urgent transitions, allowing React to keep the UI responsive by prioritizing urgent updates (like typing) over the transition. It returns an isPending flag and a startTransition function that wraps the low-priority update. This is particularly useful for expensive re-renders like filtering large lists or navigating between views.
Custom hooks are JavaScript functions that start with 'use' and can call other hooks to encapsulate reusable stateful logic. They allow you to extract and share behavior between components without changing the component hierarchy or using render props and higher-order components. Each component using a custom hook gets its own independent copy of the state and effects defined within it.