React interview questions

How to approach thisuseEffect runs asynchronously after the browser paints. useLayoutEffect runs synchronously after DOM mutations but before the browser paints. Use useLayoutEffect only when you need to measure or mutate the DOM before the user sees it (e.g., tooltip positioning). In most cases, useEffect is correct.

How to approach thisComponents re-render when their parent re-renders, their state changes, or their context value changes. Prevent with: React.memo for expensive components, useMemo/useCallback to stabilize reference values passed as props, context splitting to avoid broad re-renders, and moving state down to the component that owns it.

How to approach thisReact compares the previous and next virtual DOM trees. It assumes: different element types produce different trees (full replacement), and sibling elements are identified by their key prop. Without keys, React matches by index, which can cause bugs with reorderable lists. Keys let React track which items moved, were added, or removed.

How to approach thisServer Components render on the server and send serialized UI (not JS) to the client. They can access databases, file systems, and secrets directly. Client Components run in the browser and handle interactivity (state, effects, event handlers). Server Components reduce bundle size because their code never ships to the client.

How to approach thisuseState accepts a function: useState(() => expensiveComputation()). This function runs only on the initial render, not on every re-render. Use it when the initial value requires computation (parsing JSON, filtering a large array). Without the function form, the computation runs on every render even though the result is discarded.

How to approach thisUse React Context with useReducer for complex state. Split contexts by domain (auth context, theme context, cart context) to avoid unnecessary re-renders. For derived state, use useMemo. For performance-critical cases, consider the useSyncExternalStore hook to subscribe to an external store without Context overhead.

How to approach thisThe key prop helps React identify which items in a list changed, were added, or removed. Using index as a key breaks when items are reordered, inserted, or deleted because React associates state with the index position, not the item. Use a stable unique identifier (database ID, UUID) as the key.

How to approach thisUse Error Boundaries (class components with componentDidCatch/getDerivedStateFromError) to catch rendering errors and show fallback UI. For async errors (data fetching), catch them in the fetch logic and store error state. In Next.js, use error.tsx files for route-level error handling. Error Boundaries do not catch event handler errors.

How to approach thisuseRef holds a mutable value that persists across renders without causing re-renders when changed. Use it for: DOM element references, storing previous values, timers/intervals, and any mutable value that should not trigger a re-render. If the UI should update when the value changes, use useState instead.

How to approach thisVirtualize the list using react-window or TanStack Virtual so only visible items (plus a small buffer) are rendered in the DOM. Memoize list item components with React.memo. If items are complex, debounce scroll-triggered state updates. Consider pagination as an alternative UX pattern.

How to approach thisCustom hooks are functions that start with 'use' and can call other hooks. They let you extract and reuse stateful logic across components. Rules: only call hooks at the top level (not inside loops, conditions, or nested functions), and only call them from React function components or other custom hooks. The linter enforces this via eslint-plugin-react-hooks.

How to approach thisSuspense lets you declaratively specify a loading fallback while async content loads. A component 'suspends' by throwing a Promise. Suspense catches it, shows the fallback, and re-renders when the Promise resolves. In React 18+, it works with React.lazy for code splitting and with compatible data-fetching libraries (Next.js, Relay, SWR experimental).