React interviews at Pakistani software houses (Arbisoft, Devsinc, Folio3, and export-focused startups) usually run in two rounds: a fundamentals discussion covering hooks, rendering, and state, then a practical round with a small build task or code review. These are the questions that appear most often, with answers at the depth interviewers expect.
The virtual DOM is an in-memory representation of the UI. When state changes, React builds a new virtual tree, diffs it against the previous one, and applies only the minimal set of changes to the real DOM. Direct DOM operations are slow; batched, targeted updates are fast. A good answer also mentions that React's reconciliation uses keys to match list items efficiently — and that's why array-index keys cause bugs on reorder.
Both persist values across renders, but useState triggers a re-render when updated while useRef does not. Use state for anything the UI displays; use refs for mutable values the UI doesn't depend on — timer IDs, previous values, DOM element handles. A common follow-up: reading ref.current during render is unsafe because it doesn't participate in React's data flow.
After the render is committed to the screen — never during render. With an empty dependency array it runs once after mount; with dependencies it re-runs when any dependency changes; with no array it runs after every render. The cleanup function runs before the next effect execution and on unmount, which is where you clear subscriptions, timers, and abort fetches.
A component re-renders when its state changes, its parent re-renders, or its context value changes. Common fixes: React.memo for pure children, useMemo/useCallback to stabilise object and function references passed as props, splitting large contexts, and lifting state down (keeping it as local as possible). Interviewers want you to say you'd measure with React DevTools Profiler before optimising.
A controlled input's value lives in React state and updates via onChange — React is the source of truth. An uncontrolled input keeps its value in the DOM and you read it via a ref when needed. Controlled gives you validation-as-you-type and conditional logic; uncontrolled is simpler and faster for large forms. Libraries like react-hook-form use uncontrolled inputs with refs precisely for performance.
Passing data through intermediate components that don't use it, just to reach a deep child. Alternatives: React Context for low-frequency global data (theme, auth), state libraries like Zustand or Redux for frequently-changing shared state, and component composition — passing children instead of data — which is the most underused fix.
Keys let React match elements between renders. With index keys, inserting or reordering items makes React associate state with the wrong elements — checkbox states and input values visibly jump to the wrong rows. Use a stable unique ID from the data. Index keys are only acceptable for static, never-reordered lists.
Profile before touching code: React DevTools Profiler for wasted renders, the Network tab for oversized bundles or waterfalls, and Lighthouse for Core Web Vitals. Typical culprits in order: unmemoized context values re-rendering whole trees, large lists without virtualisation, heavy components not code-split, and images without dimensions. Naming a measurement-first approach is what separates senior answers.
A strong resume is what gets you into the room. Build one free — ATS-friendly templates, unlimited edits, no account needed, first download free.