React Interview Question

-

Core React Fundamentals (Must be strong)

  1. Explain how React works under the hood.
  2. What is the Virtual DOM and why does React use it?
  3. What happens when you call setState or a state setter in hooks?
  4. Difference between functional and class components (and why functional dominates today).
  5. What are React Hooks and why were they introduced?
  6. Rules of Hooks — why are they important?
  7. What is reconciliation in React?
  8. How does React decide to re-render a component?
  9. What is JSX and how is it transformed?
  10. Controlled vs uncontrolled components.

Hooks Deep Dive

  1. Explain useState behavior in detail.
  2. When does useEffect run? Explain dependency array deeply.
  3. Common mistakes with useEffect.
  4. Difference between useEffect, useLayoutEffect.
  5. What is useRef used for besides DOM references?
  6. How does useMemo differ from useCallback?
  7. When should you NOT use memoization?
  8. Explain custom hooks — when and why to create them.
  9. Can hooks replace Redux? Why or why not?
  10. How do you share logic across components without HOCs?

State Management

  1. When do you use Context API vs Redux?
  2. What problems does Context API NOT solve?
  3. Explain Redux flow (actions → reducers → store).
  4. What is Redux middleware?
  5. Have you used Redux Toolkit? Why is it preferred?
  6. How do you handle global vs local state decisions?
  7. What is state normalization?
  8. How do you manage server state vs UI state?

Performance Optimization

  1. What causes unnecessary re-renders in React?
  2. How do you prevent re-renders in large applications?
  3. Explain React.memo and its limitations.
  4. How does referential equality affect performance?
  5. What is list virtualization? Have you used it?
  6. How do you optimize large lists in React?
  7. What are expensive renders and how do you identify them?
  8. How do you measure React performance issues?
  9. What tools do you use (React DevTools Profiler, Lighthouse)?
  10. What is code splitting in React?

Component Design & Architecture

  1. How do you design reusable components?
  2. What makes a component “badly designed”?
  3. Presentational vs container components.
  4. How do you structure a large React codebase?
  5. How do you manage shared component libraries?
  6. How do you handle prop drilling?
  7. What is composition in React?
  8. When would you avoid creating a reusable component?
  9. How do you design scalable UI systems?

Lifecycle & Rendering Behavior

  1. Explain React rendering lifecycle.
  2. What triggers a re-render?
  3. What happens during hydration?
  4. How does React batch state updates?
  5. What is stale closure in React?
  6. Why does state sometimes not update immediately?
  7. What is concurrent rendering (React 18)?
  8. How does Suspense work?
  9. What are transitions in React (startTransition)?

API Handling & Async Logic

  1. How do you handle API calls in React?
  2. What are race conditions in API calls?
  3. How do you cancel API requests in React?
  4. How do you handle loading/error states globally?
  5. Difference between React Query vs manual fetching.
  6. How do you cache API responses?
  7. How do you prevent duplicate API calls?
  8. How do you handle pagination/infinite scroll?

Forms & Events

  1. Controlled vs uncontrolled forms — when to use each?
  2. How do you manage large forms in React?
  3. What libraries have you used (Formik, React Hook Form)?
  4. How do you validate forms efficiently?
  5. How does event delegation work in React?
  6. Synthetic events in React — what are they?

Advanced React Concepts

  1. What are portals and when do you use them?
  2. What is error boundary and how is it implemented?
  3. How do error boundaries differ from try/catch?
  4. What are higher-order components (HOCs)?
  5. Render props pattern — still relevant?
  6. What are fragments and why are they useful?
  7. What are React refs used for in real projects?
  8. What is hydration mismatch?
  9. What is React Fiber architecture (high level)?
  10. What are React Server Components (conceptual)?

Debugging & Real-World Scenarios

  1. Your component is re-rendering too often — how do you debug it?
  2. API is called multiple times unexpectedly — why?
  3. UI flickers on navigation — what could be wrong?
  4. Memory leak in React app — how would you find it?
  5. App slows down after scaling — what do you check first?
  6. State updates not reflecting immediately — why?
  7. Why is useEffect running twice in development?
  8. You see infinite render loop — how do you fix it?

Testing in React

  1. How do you test React components?
  2. Unit vs integration testing in React apps.
  3. What is React Testing Library philosophy?
  4. How do you mock API calls?
  5. What do you avoid testing in React?
  6. What are snapshot tests and their drawbacks?
  7. How do you test hooks?
  8. How do you test async behavior?

Code Quality & Best Practices

  1. How do you enforce code quality in React projects?
  2. What linting rules are most important?
  3. How do you structure reusable hooks?
  4. How do you prevent spaghetti React code?
  5. What naming conventions do you follow?
  6. How do you handle TypeScript with React?
  7. How do you ensure scalable folder structure?

System Thinking / Design Questions

  1. Design a reusable component library.
  2. Design a dashboard with real-time data updates.
  3. How would you architect a multi-tenant React app?
  4. How do you design a design system in React?
  5. How would you migrate a large legacy React app?
  6. How would you implement role-based UI rendering?
  7. How would you design a performant infinite feed?

Behavioral / Experience-Based

  1. What is the most complex React bug you solved?
  2. What performance improvement had the biggest impact?
  3. How do you handle disagreements in code reviews?
  4. Have you mentored junior React developers?
  5. What architectural decision are you most proud of?
  6. What mistake taught you the most in React?
  7. How do you stay updated with React changes?

Expert-Level / Deep React

  1. Explain React reconciliation algorithm in detail.
  2. What is fiber tree and how does it work?
  3. How does React schedule rendering work?
  4. Why is React “not reactive” in the traditional sense?
  5. How does concurrent mode change rendering behavior?
  6. What is lane-based scheduling in React?
  7. How does React handle priority updates?
  8. What happens internally when context changes?


This was part of Interview Preparation With Bipin — Let’s Crack It!

Comments

Post a Comment

Popular posts from this blog

Angular Architecture

-
Image
Angular Architecture is divided into different parts like Component, Template, Directive, Service, and Module. Before you start to develop your application, you should have knowledge about the purpose of each part of the application. So that you can make your application smoother and faster. Below is the figure of angular architecture. Angular Architecture In this chapter, we will see each term in detail. Module Angular Applications are modular and Angular has its own modularity system called NgModule. Every Angular application has at least one class with a @NgModule decorator, it is the root module, conventionally named as AppModule. To use any component into an application you need to declare it into the related module. Angular Module is class with a @NgModule decorator. Code Snippet of Angular Module The most important properties of @NgModule are : declarations:  declaration property contains ...
Read more

Why should I learn Angular?

-
It is one of the most growing and advanced technology for create a Single Page Applications(SPA). Here the things why you should learn Angular. It is one of the Google Technology Easy to Learn, if you’re familiar with Java Script and UI Nowadays Single Page Applications(SPA) is the trend. If you want to increase your career opportunities Having a lot of Fun while working with Angular If you’re familiar with OOPS then Angular 4 is easy to code Typescript which helps you to create OOPS based Front End Design Lot of resources available to learn Angular And lot more…
Read more

Solid Principle

-
SOLID Principle What are the SOLID principles? Five object-oriented design principles  help make code: Maintainable (easy to change without breaking things) Extensible (easy to add new features) Testable (easy to write unit tests) Understandable (easy for other developers to read) The five principles: S – Single Responsibility Principle (SRP) One class = one reason to change. O – Open/Closed Principle (OCP) Open for extension, closed for modification. L – Liskov Substitution Principle (LSP) Subclasses should work wherever base classes work (no broken contracts). I – Interface Segregation Principle (ISP) Clients should not be forced to depend on methods they don’t use. D – Dependency Inversion Principle (DIP) Depend on abstractions, not concrete classes. Why are we using SOLID principles? Reduce bugs when requirements change → You can modify code without breaking unrelated parts. Improve maintainability → Code is easier to und...
Read more