USA
Canada
UK
Europe
Australia
Singapore
Japan
IndiaQ1. How do React hooks work, and what rules must you follow?
Short answer: Hooks add state/effects to function components; call them at the top level, unconditionally.
Strong answer: Hooks like useState/useEffect let function components hold state and side effects. React tracks them by call order, so you must call them unconditionally at the top level, not in loops or conditions. Custom hooks compose built-ins to share logic. This is current through React 19.2.
Likely follow-up: Why does calling a hook conditionally break React?
What the interviewer is checking: Understanding of the hooks model, not just syntax.
Common mistake: Calling hooks inside conditions or loops.
Q2. Explain the virtual DOM and reconciliation.
Short answer: React diffs a virtual tree against the previous one and updates only what changed.
Strong answer: React builds a lightweight virtual representation of the UI; on state change it re-renders, diffs against the prior tree, and applies the minimal real-DOM updates. Keys help it match list items efficiently. React 19’s compiler can auto-memoize to reduce needless re-renders.
Likely follow-up: Why are stable keys important in lists?
What the interviewer is checking: Grasp of rendering performance fundamentals.
Common mistake: Using array index as key for dynamic lists.
Q3. What is the difference between useMemo, useCallback, and React.memo?
Short answer: Memoize a value, a function, and a component respectively.
Strong answer: useMemo caches a computed value; useCallback caches a function reference; React.memo skips re-rendering a component when props are unchanged. Use them to prevent expensive recomputation or breaking referential equality — but don’t over-apply; React 19’s compiler reduces the need.
Likely follow-up: When does over-using useMemo hurt?
What the interviewer is checking: Judgment about performance, not cargo-culting.
Common mistake: Wrapping everything in useMemo without measuring.
Q4. How do you manage side effects with useEffect?
Short answer: Run effects after render; declare dependencies; clean up to avoid leaks.
Strong answer: useEffect runs after paint for data fetching, subscriptions, etc. The dependency array controls when it re-runs; return a cleanup function to cancel subscriptions or timers. Missing deps cause stale closures; over-broad deps cause loops. For data fetching, prefer libraries or Suspense patterns.
Likely follow-up: What causes an infinite re-render loop with useEffect?
What the interviewer is checking: Correct effect and dependency reasoning.
Common mistake: Omitting dependencies or missing cleanup.
Q5. What are React Server Components and why do they matter?
Short answer: Components rendered on the server, shipping less JS to the client.
Strong answer: RSCs render on the server, can access data directly, and send serialized output — reducing client bundle size and improving performance. Client components (marked "use client") handle interactivity. This split, mainstream in React 19 + frameworks like Next.js 16, is a major shift in how apps are structured.
Likely follow-up: What can’t you do inside a Server Component?
What the interviewer is checking: Awareness of current React architecture.
Common mistake: Assuming everything must be a client component.
Q6. How does state management scale beyond useState?
Short answer: Lift state, use context for shared state, or a library for complex global state.
Strong answer: Start with local useState, lift shared state to a common parent, use Context for low-frequency global values (theme, auth), and reach for a store (Redux Toolkit, Zustand) or server-state libraries (TanStack Query) for complex or server-derived state. Avoid putting everything in one giant context.
Likely follow-up: Why is Context a poor fit for high-frequency updates?
What the interviewer is checking: Architectural judgment.
Common mistake: Using Context for rapidly changing state and causing re-render storms.
Q7. What causes unnecessary re-renders and how do you fix them?
Short answer: New references, unstable props, or context changes; fix with memoization and structure.
Strong answer: Re-renders happen when state/props/context change. Common culprits: inline objects/functions creating new references, over-broad context, and lifting state too high. Fix with useCallback/useMemo, React.memo, splitting context, or colocating state. React 19’s compiler auto-optimizes many cases.
Likely follow-up: How would you diagnose which component re-renders too often?
What the interviewer is checking: Practical performance debugging.
Common mistake: Optimizing without the React DevTools profiler.
Q8. How do you handle forms and validation in React?
Short answer: Controlled inputs or form libraries; validate on change/submit with clear errors.
Strong answer: Controlled components bind input value to state; for complex forms use libraries (React Hook Form) to reduce re-renders and handle validation, errors and submission cleanly. React 19 adds form actions and useActionState for progressive, server-friendly forms.
Likely follow-up: Controlled vs uncontrolled inputs — trade-offs?
What the interviewer is checking: Real-world form handling.
Common mistake: Re-rendering the whole form on every keystroke unnecessarily.
Need Proxy Interview Support?
Share your JD on WhatsApp and clear these rounds with a stack expert.
Q9. How would you improve the performance of a large React list?
Short answer: Virtualize, memoize rows, stable keys, and avoid heavy work in render.
Strong answer: Render only visible rows with virtualization (react-window/virtual), give stable keys, memoize row components, keep render pure and cheap, and paginate or lazy-load data. Move expensive computation out of render or into useMemo.
Likely follow-up: Why does rendering 10,000 rows at once hurt?
What the interviewer is checking: Understanding of rendering cost at scale.
Common mistake: Rendering huge lists without virtualization.
Q10. What is the difference between client-side and server-side rendering in React apps?
Short answer: CSR renders in the browser; SSR/SSG render HTML ahead of time for speed and SEO.
Strong answer: CSR ships JS that builds the UI in-browser — flexible but slower first paint and weaker SEO. SSR renders HTML per request; SSG pre-renders at build. Frameworks like Next.js 16 mix these per route, with RSC reducing shipped JS. Choose by SEO, freshness, and performance needs.
Likely follow-up: When would you pick SSG over SSR?
What the interviewer is checking: Rendering strategy judgment.
Common mistake: Treating an SEO-critical site as pure CSR.