10 React Interview Questions (Pune Freshers, 2026)

The list

1. 1

   What is the Virtual DOM and how does it work?

   An in-memory tree representation of the actual DOM. React keeps two virtual trees: current (rendered) + next (after state/props change), diffs them via the reconciliation algorithm, and applies only the minimum set of changes to the real DOM. Result: fewer expensive real-DOM operations than directly manipulating it.

   Why it matters: Asked at ~85% of Pune React fresher rounds. Mention the React Fiber reconciler + concurrent rendering (React 18+) as senior-fresher signal.

   Best for: First-pass concepts screening; expected fluency.

2. 2

   Explain the difference between state and props.

   Props: read-only data passed from parent to child component (one-way data flow). State: component-internal data that triggers re-render when changed via setState (class) or the setter from useState (hooks). Props are like function arguments; state is like local variables that survive re-renders.

   Why it matters: Asked at ~80% of Pune rounds. Common follow-up: 'should I lift state up?' — yes, when multiple sibling components need the same state.

   Best for: Foundation data-flow question.

3. 3

   What's the difference between useState and useReducer?

   useState fits simple state with independent updates (boolean toggle, counter, form field). useReducer fits complex state where multiple values change together (form with validation, multi-step wizard), or where state transitions follow well-defined actions (Redux-like pattern). Cleaner for testing complex logic + easier to reason about state transitions.

   Why it matters: Asked at ~55% of Pune product company rounds. Mention dispatch pattern + reducer purity (no side effects).

   Best for: Demonstrating beyond-basic hooks understanding.

4. 4

   Explain useEffect with its dependency array.

   useEffect runs side effects after render: data fetching, subscriptions, manual DOM mutations. Dependency array controls when: empty [] runs once after mount; [a, b] runs when a or b changes; omitted runs after every render. Cleanup function in the return handles unmount + dependency-change cleanup.

   Why it matters: Asked at ~75% of Pune rounds. Common gotcha: 'why is my useEffect causing infinite loop?' (state set in effect + state in dep array = loop).

   Best for: Hooks core concept; expected at every fresher round.

5. 5

   What's the difference between controlled and uncontrolled components?

   Controlled: form input value lives in React state via value + onChange (one source of truth — React owns the data). Uncontrolled: input value lives in the DOM, accessed via refs (React doesn't track it directly). Modern React + form libraries (React Hook Form) blend both for performance.

   Why it matters: Asked at ~50% of Pune full-stack rounds. Forms are the most-touched UI surface in Pune SaaS work; controlled is the safer default.

   Best for: Forms / data-entry interview focus.

6. 6

   What is the Context API and when would you use it?

   Context lets you share data across the component tree without prop drilling. Create a Context, wrap a tree in a Provider with a value, consume via useContext in any descendant. Best for low-frequency-change data (theme, current user, locale). Don't overuse — every Context change re-renders ALL consumers; not a Redux replacement.

   Why it matters: Asked at ~50% of Pune rounds. Common follow-up: 'when would you reach for Redux/Zustand instead?' (high-frequency updates + complex state).

   Best for: State-management architecture question.

7. 7

   Explain React.memo, useMemo, and useCallback.

   React.memo: skip re-rendering a component if props are shallowly equal. useMemo: cache a computed value across renders; recompute only when deps change. useCallback: cache a function reference across renders; same function unless deps change. All three are performance optimisations — don't apply by default; profile first.

   Why it matters: Asked at ~45% of Pune rounds. Mention the 'premature optimisation' trap — overusing memoisation hurts more than it helps.

   Best for: Performance optimisation depth; differentiates beyond fresher tier.

8. 8

   What are React keys and why do they matter?

   Unique identifiers that help React's reconciler track items across renders. Without keys (or with index keys on dynamic lists), React can't reliably tell which items moved/added/removed — causes stale state in inputs, wrong items animated, focus loss. Use stable IDs from your data (id field), not array indexes.

   Why it matters: Asked at ~55% of Pune rounds. Common bug fix question: 'why does the wrong row's input show stale value when I delete one?' — answer is array-index keys.

   Best for: List-rendering correctness; common debugging interview.

9. 9

   How do you handle data fetching in React?

   Three patterns: (1) useEffect + useState (vanilla — simple but boilerplate). (2) Data-fetching library (TanStack Query, SWR) — handles caching, retries, dedup, stale-while-revalidate. (3) Framework-level data fetching (Next.js Server Components, Remix loaders). Production-grade: a library like TanStack Query is the modern default; raw useEffect for one-off fetches.

   Why it matters: Asked at ~60% of Pune product company rounds. Services majors usually accept the vanilla pattern; product cos screen for library awareness.

   Best for: Production-readiness signal; common architecture question.

10. 10

    How do you test React components?

    Standard stack: React Testing Library (component behaviour from user perspective) + Vitest or Jest (test runner). Test what users see + do: render → query by accessible name/role/label → fire events → assert visible outcome. Avoid testing implementation details (state, internal calls). Mention MSW for mocking API calls.

    Why it matters: Asked at ~40% of Pune rounds. Product companies screen depth; services majors check awareness. Mention `screen.getByRole` over `getByTestId` as senior-fresher signal.

    Best for: Engineering discipline; product-company differentiator.