®React’s 15 Most Powerful Interview Questions
React interviews in are no longer about
memorizing hook names or JSX syntax. Interviewers now test performance trade-offs, architectural decisions, and real‑world problem‑solving. Here are 15 powerful questions asked in top product‑based companies — each with its level and a crisp answer.
---
Level 1: Fundamental (Beginner to Mid‑Level)
Q1. What is React Fiber and how does it improve rendering?
Answer: React Fiber is a complete rewrite of React’s core algorithm. It enables incremental rendering, making the UI more responsive. Fiber splits render work into small units that can be paused, resumed, and aborted. This is why React can now support features like error boundaries, Suspense, and concurrent rendering.
---
Q2. How does the reconciliation algorithm work?
Answer: Reconciliation is the process where React compares the new virtual DOM tree with the old one and computes the minimum number of DOM operations. React uses a heuristic O(n) algorithm based on two assumptions: elements of different types produce different trees, and items with stable keys can be tracked across lists. The Fiber architecture made reconciliation interruptible.
Important: Using unstable keys (e.g., array indices) forces React to re‑create the entire list unnecessarily.
---
Q3. What’s the difference between controlled and uncontrolled components?
Answer:
· Controlled: Form data is handled by React’s useState.
· Uncontrolled: Form data lives in the DOM and is accessed via useRef.
· Controlled components are preferred for complex forms and validation.
---
Level 2: Intermediate (Mid to Senior Level)
Q4. useEffect vs useLayoutEffect — when to use which?
Answer: Both run after render, but at different times:
· useEffect: Runs asynchronously after the browser paints. Use for data fetching, subscriptions, and side effects.
· useLayoutEffect: Runs synchronously after DOM mutations but before the browser paints. Use when you need to measure the DOM or avoid visual flicker.
Rule of thumb: Default to useEffect. Switch to useLayoutEffect only if you see a visual flicker.
---
Q5. useCallback vs useMemo — when are they actually needed?
Answer:
· useCallback(fn, deps) → returns a memoized function.
· useMemo(factory, deps) → returns a memoized value.
Both prevent unnecessary re‑calculations or re‑renders. However, in 2026 (with the React compiler), using useMemo everywhere is considered an anti‑pattern — memoization has overhead. Only use them for expensive computations or components that re‑render frequently.
---
Q6. What are the Rules of Hooks, and what problem do they solve?
Answer: The Rules of Hooks:
1. Call hooks only at the top level (not inside loops, conditions, or nested functions).
2. Call hooks only from React functions.
These rules ensure a stable call order for hooks, which React relies on to correctly track state. If the order changes, React cannot tell which state belongs to which hook.
---
Q7. When to use React Context and when not to?
Answer: React Context is great for sharing theme, user, locale across the component tree without prop drilling.
When NOT to use it: For high‑frequency state (e.g., real‑time updates), Context causes unnecessary re‑renders. Use dedicated state management like Zustand, Jotai, or Redux for that.
---
Q8. How does React’s batching work?
Answer: React batches state updates inside event handlers to reduce renders. In concurrent mode, React also batches async updates (e.g., inside setTimeout, fetch). You can use flushSync() to force synchronous updates if needed.
---
Q9. What does the React 19 Compiler do? Can it replace useMemo?
Answer: The React 19 Compiler automatically memoizes components and values, reducing the need for manual useMemo and useCallback. It optimises React code without extra developer effort.
However: The compiler doesn’t work in every case — sometimes it bails out. You may still need to opt out in some situations. Saying “useMemo everywhere” is now a common mistake in 2026.
---
Q10. React Server Components vs Client Components — what’s the difference?
Answer:
· Server Components: Run on the server and do not ship JavaScript to the client. They can directly access databases and server‑only resources. They cannot use browser APIs, event handlers, or hooks like useState.
· Client Components: The traditional React components with full interactive APIs. In Next.js App Router, they are marked with "use client".
Key insight: Server Components drastically reduce the JavaScript sent to the client and enable component‑level server‑side data fetching.
---
Level 3: Advanced (Senior to Expert Level)
Q11. How do you prevent unnecessary re‑renders in a large React application?
Answer (layered approach):
1. React.memo — Wrap a component to skip re‑renders if props haven’t changed.
2. useMemo — Memoize expensive computed values.
3. useCallback — Memoize function references to prevent child re‑renders.
4. State colocation — Keep state as close as possible to where it’s used.
5. Context splitting — Separate frequently‑changing context from rarely‑changing context.
6. Code splitting — Use React.lazy to defer non‑critical components.
---
Q12. How do useTransition and useDeferredValue affect UI responsiveness?
Answer:
· useTransition: Tells React which updates are non‑urgent. It prioritises urgent updates (e.g., input typing) and schedules non‑urgent ones (e.g., search results) in the background.
· useDeferredValue: Returns a deferred version of a value that only updates when urgent work is complete.
Both are part of concurrent rendering and keep the UI responsive.
---
Q13. Why does scheduling matter in React Fiber?
Answer: React Fiber breaks render work into units of work (fibers) that can be paused, resumed, or aborted. This scheduling mechanism lets React decide which updates are urgent and which are not. That’s what enables Concurrent Mode, transitions, and Suspense.
---
Q14. Redux vs Zustand vs Jotai — how to choose the right tool?
Answer: Depends on scale and complexity:
· Redux: For large‑scale apps where complex global state, middleware, and strict predictability are needed.
· Zustand: Simple, boilerplate‑free — best for δΈε° (small‑to‑medium) projects.
· Jotai: Atomic state management — closest to React’s mental model.
Trend: most apps don’t need Redux anymore” — lighter alternatives are preferred.
---
Q15. What is tearing, and how does React 18+ avoid it?
Answer: Tearing is a visual inconsistency where different parts of the UI show different versions of the same state during concurrent rendering. React 18+ avoids it via useTransition and useDeferredValue, which ensure the UI always displays a consistent state snapshot.
`Visiti Now`
Developer Web Development JavaScript
React Hooks React19 ReactFiber Server Components
Interview Preparation Coding Interview Tech Careers Frontend Engineering
React Tips FullStack Developer State Management Performance Optimiz
Comments
Post a Comment
Thanks for sharing your thoughts! Stay tuned for more updates