Frontend · Fresher-relevant
React.js Interview Questions 2026
Hooks • Context API • Performance • State Management
Curated React.js interview questions for Indian product companies and campus placements — with learning roadmap, architecture flow, topic importance charts, React vs Angular vs Vue comparison, common mistakes, and a 30-day preparation plan.
On this page
React.js Interview Questions
8 curated · Hooks & state · Updated 2026- 01
What is the virtual DOM and how does reconciliation work?
TechnicalMediumView expert answer & prep guide
Expert answer: The virtual DOM is React’s in-memory tree of UI elements. When state changes, React builds a new tree and diffs it against the previous snapshot — this process is reconciliation. It then applies the minimal set of real DOM mutations rather than repainting the whole page. Keys help React match list items across renders so state stays attached to the correct row. I also note that virtual DOM is not automatic speed for every case — component design, batching, and avoiding unnecessary renders still matter in production.
What interviewers evaluate: React mental model depth beyond JSX — reconciliation, diffing, and update strategy.
Answer strategy: Define virtual DOM, explain diff-and-patch flow, mention keys for list identity, note performance depends on design.
Common mistakes: Claiming virtual DOM always makes React faster than vanilla JS, or conflating reconciliation with full page reload.
Follow-up questions:
- Why do list keys matter?
- What triggers a React re-render?
- 02
Explain the useEffect hook and its dependency array.
TechnicalMediumView expert answer & prep guide
Expert answer: useEffect runs side effects after paint — data fetching, subscriptions, timers, and DOM sync. The dependency array controls re-runs: omitting it runs after every render, `[]` runs once on mount, and `[dep]` re-runs when `dep` changes. Return a cleanup function to unsubscribe or clear timers on unmount or before the next effect run. Missing dependencies cause stale closures — I follow exhaustive-deps lint and explain why. In interviews I contrast effects that sync with external systems vs derived state that belongs in render.
What interviewers evaluate: Side-effect lifecycle understanding and whether you avoid common stale-closure bugs.
Answer strategy: Explain timing (after paint), dependency array cases, cleanup pattern, and stale-deps pitfall with lint rule.
Common mistakes: Using useEffect for derived state, omitting cleanup on subscriptions, or ignoring dependency array intentionally.
Follow-up questions:
- When should you not use useEffect?
- What is useLayoutEffect for?
- 03
What is the difference between useMemo, useCallback, and React.memo?
TechnicalMediumView expert answer & prep guide
Expert answer: useMemo caches a computed value between renders when dependencies are unchanged. useCallback caches a function reference — `useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`. React.memo wraps a component and skips re-render when props are shallow-equal. I apply all three only after profiling shows unnecessary work — premature memoization adds complexity and can hurt performance. In interviews I give one example: memoizing a heavy filter on a large list vs memoizing every inline callback.
What interviewers evaluate: Performance optimization judgment — measurement-first vs blanket memoization.
Answer strategy: Define each API, state referential equality purpose, emphasize profile-first usage with one concrete example.
Common mistakes: Memoizing everything by default, or unable to explain shallow compare limits of React.memo.
Follow-up questions:
- When does useMemo hurt performance?
- What is a stale closure in useCallback?
- 04
Why do React lists need a key, and why is index a poor key?
TechnicalEasyView expert answer & prep guide
Expert answer: Keys give each list element a stable identity across renders so reconciliation can match the correct DOM node when the list reorders, inserts, or deletes items. Using the array index as key breaks when order changes — React reuses the wrong DOM nodes and state or controlled inputs attach to the wrong row. I use stable unique ids from the data model. In interviews I connect keys to reconciliation efficiency and correct component state preservation.
What interviewers evaluate: Reconciliation mechanics and practical list-rendering hygiene.
Answer strategy: Explain identity across renders, show reorder bug with index keys, recommend stable unique ids.
Common mistakes: Using index keys on sortable/filterable lists, or saying keys are only for performance not correctness.
Follow-up questions:
- What if ids are not unique?
- How do keys affect React.memo children?
- 05
What are controlled vs uncontrolled components?
TechnicalEasyView expert answer & prep guide
Expert answer: Controlled components keep form value in React state via `value` and `onChange` — single source of truth, easy validation and multi-step flows. Uncontrolled components let the DOM hold state, read with refs — useful for file inputs or simple one-off fields. I prefer controlled for product forms with validation and analytics. Mixing controlled and uncontrolled on the same input causes warnings and inconsistent behavior. Interviewers check whether you know when refs are appropriate.
What interviewers evaluate: Form state architecture and React data-flow understanding.
Answer strategy: Contrast state ownership (React vs DOM), give when to use each, warn against mixing on same field.
Common mistakes: Treating all forms as uncontrolled, or not knowing file inputs typically need refs.
Follow-up questions:
- How do you validate controlled fields?
- When would you use react-hook-form?
- 06
What problem do useState's functional updates and immutability solve?
TechnicalMediumView expert answer & prep guide
Expert answer: React detects state changes by reference — mutating objects or arrays in place does not trigger re-renders. Immutability means returning new references via spread, map, or filter. Functional updates `setCount(c => c + 1)` read the latest state from React’s queue, avoiding stale values when multiple updates batch in the same event. This matters in rapid clicks, intervals, and concurrent features. I demonstrate both patterns in live coding answers.
What interviewers evaluate: State update mechanics, batching awareness, and immutability habits.
Answer strategy: Explain reference equality detection, show functional update for batched events, contrast mutation bug.
Common mistakes: Mutating state directly, or using current state variable when functional form is required.
Follow-up questions:
- How does React 18 batching affect setState?
- When use useReducer instead?
- 07
How does the Context API work and when does it cause performance issues?
TechnicalHardView expert answer & prep guide
Expert answer: Context lets you pass values through the tree without prop drilling — a Provider supplies a value and consumers read it via useContext. Every consumer re-renders when the provider value changes, so a new object literal each render re-renders the entire subtree. I memoise provider values with useMemo, split contexts by concern (theme vs auth), or move high-frequency state to Zustand/Redux with selectors. For interview answers I explain when Context fits (theme, locale) vs when a store fits (frequent updates).
What interviewers evaluate: Global state architecture judgment and re-render cost awareness.
Answer strategy: Describe provider/consumer flow, explain all-consumers-rerender rule, give split-context and memo fixes.
Common mistakes: Putting entire app state in one Context, or not knowing selector libraries reduce re-renders.
Follow-up questions:
- Context vs Redux — when to choose each?
- How do you debug Context re-renders?
- 08
What are the rules of hooks and why do they exist?
TechnicalMediumView expert answer & prep guide
Expert answer: Hooks must be called at the top level — never inside conditions, loops, or nested functions — and only from React function components or custom hooks. React stores hook state in a linked list keyed by call order per component. Conditional calls would shift that order between renders and corrupt state. eslint-plugin-react-hooks enforces this. Custom hooks let you reuse stateful logic while obeying the same rules. I mention this when discussing why early returns before hooks are invalid.
What interviewers evaluate: Fundamental React execution model — not just memorizing the rules list.
Answer strategy: State the two rules, explain call-order linked list model, mention eslint and custom hooks.
Common mistakes: Calling hooks conditionally, or unable to explain why order matters beyond “the docs say so”.
Follow-up questions:
- How do custom hooks work internally?
- Can hooks be used in class components?
React Learning Roadmap 2026
Solid ES6+ and async JavaScript underpin every React loop — do not skip straight to hooks without closures and promises.
Pair with our JavaScript topic questions and the Frontend Developer hub.
React Application Architecture
Practice tracing a user action through every layer below — interviewers expect you to explain how production React apps move data from UI to backend and back.
See also REST API questions for networking depth in full-stack React roles.
Topic Importance for React Interviews
Interview panels do not weight React topics equally. The chart below is an illustrative composite of product company and campus frontend rounds across India — use it to order revision.
Illustrative topic importance (technical rounds)
React vs Angular vs Vue
Indian frontend loops overwhelmingly favor React, but enterprise employers still hire Angular specialists. Use this table to prioritize learning and answer framework trade-off questions with context.
| Dimension | React | Angular | Vue |
|---|---|---|---|
| Learning Curve | Moderate — JSX + hooks; large ecosystem to navigate | Steep — TypeScript, RxJS, modules, and Angular CLI conventions | Moderate — approachable SFC syntax; composition API adds depth |
| Performance | Strong with code splitting, memoization, and SSR via Next.js | Good with OnPush and lazy modules; heavier default bundle | Lightweight runtime; fine-grained reactivity aids efficiency |
| Demand (India 2026) | Very High — dominant in startups and product companies | Medium–High — enterprise IT, banking, and large service accounts | Medium — growing share; strong in selective product teams |
| Interview Frequency | Highest — most frontend loops assume React familiarity | Common in enterprise and Angular-heavy codebases | Less frequent than React; appears in Vue-first teams |
| Ecosystem | Largest — Next.js, Redux, Zustand, UI kits, hiring pool | Mature — NgRx, Angular Material, enterprise patterns | Lean — Vue Router, Pinia, Nuxt; smaller but cohesive |
Common React Interview Mistakes
These patterns cause rejections even when candidates know hook syntax. Drill JavaScript fundamentals alongside React prep.
Mistake
Overusing useEffect for derived state
Impact: Creates unnecessary re-renders, stale closure bugs, and infinite loop risks — interviewers probe whether you understand when state should be computed inline.
Fix: Derive values during render when possible; reserve useEffect for syncing with external systems (APIs, subscriptions, DOM).
Mistake
Sprinkling memoization without profiling
Impact: React.memo, useMemo, and useCallback add complexity and can hurt performance when applied blindly — signals shallow optimization knowledge.
Fix: Profile with React DevTools first; memoize only proven hot paths like large lists or expensive child trees.
Mistake
Putting everything in Context
Impact: A single provider value change re-renders all consumers — common cause of sluggish dashboards in live coding reviews.
Fix: Split contexts by concern, memoise provider values, or use Zustand/Redux for high-frequency global state.
Mistake
Using array index as list keys
Impact: Breaks reconciliation when items reorder, insert, or delete — wrong inputs keep state and causes subtle UI bugs.
Fix: Use stable unique ids from your data model; explain why keys matter in reconciliation answers.
Mistake
Mutating state directly
Impact: React misses updates because reference equality does not change — fails in useState and useReducer discussions.
Fix: Always return new objects/arrays; use functional updates setState(prev => ...) when next state depends on previous.
Mistake
Skipping JavaScript fundamentals
Impact: Candidates recite hook rules but fail closures, async, and event loop questions — Round 1 eliminations happen on JS, not JSX.
Fix: Spend 30% of React prep on vanilla JavaScript before advanced patterns; pair with our JavaScript topic questions.
30-Day React Preparation Plan
A focused four-week plan from fundamentals through mocks. Follow the placement guide for campus timelines.
Week 1 (Days 1–7)
Fundamentals
- JSX, components, props, and one-way data flow
- useState, event handling, and conditional rendering
- Component composition and lifting state up
- Build a todo or counter app from scratch without tutorials
Week 2 (Days 8–14)
Hooks
- useEffect, dependency arrays, and cleanup functions
- useRef, useMemo, useCallback, and when each applies
- Custom hooks — extract reusable logic
- Rules of hooks and eslint-plugin-react-hooks
Week 3 (Days 15–21)
Performance + APIs
- React.memo, list keys, and profiling with DevTools
- Context API vs Redux/Zustand trade-offs
- fetch integration, loading/error states, and optimistic UI
- Code splitting and lazy loading with React.lazy
Week 4 (Days 22–28)
Mocks
- Next.js basics — SSR vs CSR, routing, data fetching
- Answer all curated questions aloud with trade-offs
- 3 timed mock interviews on hooks and architecture
- Review common mistakes and refine weak follow-ups
Frequently Asked Questions
How many React.js interview questions should I prepare?
Aim for 30–50 core React questions across hooks, rendering, state management, and performance — but depth beats volume. Master 20 concepts you can explain with code examples and trade-offs rather than memorizing API lists.
Are React hooks mandatory for interviews in India?
Yes for virtually all 2026 loops. Class components appear rarely in new codebases. Expect useState, useEffect, useContext, and custom hooks in every product-company frontend round.
What is the difference between Context API and Redux?
Context shares values without prop drilling but re-renders all consumers on change. Redux adds predictable global state, middleware, devtools, and selector patterns for complex apps. Use Context for theme/locale; Redux or Zustand for frequent updates.
How important is Next.js for React interviews?
Increasingly common at product companies. Understand SSR vs CSR, App Router basics, and data fetching patterns. Not always required for fresher loops, but differentiates candidates targeting Next.js teams.
Do React interviews include JavaScript fundamentals?
Always. Closures, promises, event loop, and array methods are tested alongside React. Weak JavaScript causes rejections even when React syntax is correct.
What React performance topics matter most?
Reconciliation and keys, unnecessary re-renders, React.memo/useMemo/useCallback trade-offs, code splitting, and list virtualization. Lead with profiling — interviewers want measurement-first thinking.
How do I explain the virtual DOM in interviews?
Describe it as an in-memory UI tree. On state change, React diffs the new tree against the previous one (reconciliation) and applies minimal DOM updates. Mention keys for list identity and that virtual DOM is not automatic speed for every case.
What state management should I learn for React interviews?
Start with useState and lifting state. Add Context for shared low-frequency values. Learn Redux Toolkit or Zustand basics for global state discussions. Be ready to compare trade-offs, not advocate one library dogmatically.
How long does React interview prep take?
With JavaScript fundamentals in place, 3–4 weeks of focused study covers most fresher loops. Experienced hires targeting senior React roles should add system design and performance profiling practice.
What salary should I expect as a React developer in India (2026)?
Fresher React/frontend roles range 4–12 LPA at service firms and 10–22+ LPA at product companies depending on city, DSA depth, and portfolio quality. Confirm level and ESOP separately.
Should I build projects or grind questions for React prep?
Both. Ship one project with hooks, API integration, and error states — then use curated questions to articulate trade-offs aloud. Interviewers probe decisions from your project, not tutorial clones.
How should I use mock interviews for React prep?
Start after Week 2 of structured study. Run at least 3 mocks before real loops — mix hooks depth, live component coding, and architecture discussion. Review whether you explained trade-offs and avoided common hook mistakes.
Practice beats passive reading
Run a full React mock interview — scored in 5 dimensions
Upload your resume and practice real React questions with AI-generated follow-ups. Get rubric-based feedback on communication clarity, technical depth, answer structure, confidence, and relevance.
- Resume-aware hooks, state management, and behavioral questions
- Timed answers with filler-word analysis on voice mode
- Free credits to start — no card required