ReactJS Interview Questions

🔍 Core Concepts Deep Dive

1. What happens during the React rendering lifecycle?
   Walk through the reconciliation process and explain how React determines what to update in the DOM.

2. Explain how the Virtual DOM works.
   How does React use it to optimize performance?

3. What’s the difference between controlled and uncontrolled components?
   When would you use one over the other?

4. How do you handle error boundaries in React?
   What can and can’t they catch? Why are they important?

5. Why is React considered declarative?
   Compare it with an imperative approach (like direct DOM manipulation).

⚙️ Hooks Mastery

1. How does useEffect behave with different dependency arrays?
   Why is it considered “tricky,” and how do you avoid stale closures?

2. What is a custom hook?
   Can you write one that fetches data with loading/error states?

3. Explain useRef vs useState.
   When would you use useRef to store data?

4. What’s the purpose of useCallback and useMemo?
   When can over-using them actually hurt performance?

5. How does useReducer compare to useState?
   When should you switch from one to the other?

🚀 Performance Optimization

1. How do you optimize a React app for performance?
   Techniques like memoization, lazy loading, batching, suspense, etc.

2. What causes unnecessary re-renders?
   How can you detect and fix them?

3. What is React.memo() and how does it work under the hood?
   Can you give an example when it might not help?

4. How do you handle rendering huge lists in React?
   Virtualization tools like react-window or react-virtualized.

5. What are render props, and when might they be problematic?

🧩 Advanced Patterns & Design

1. Explain compound components.
   When is this pattern useful?

2. What are higher-order components (HOCs)?
   Why are they considered less favorable compared to hooks?

3. Explain the Context API.
   How do you avoid unnecessary re-renders when using it?

4. What is prop drilling and how do you solve it?
   Besides context, what are other strategies?

5. How do you build a reusable component library in React?
   What’s your approach to theming, accessibility, and API design?

📦 State Management (Beyond useState)

1. Compare Redux, Zustand, Recoil, and Context API.
   Which one would you use for what kind of project?

2. What are selectors in Redux and why are they useful?

3. How would you structure and normalize API response data in a Redux store?

4. Explain middleware in Redux.
   How does redux-thunk or redux-saga work behind the scenes?

5. Have you worked with server-side state (e.g., React Query, SWR)?
   What are the trade-offs vs global state management?

🛠 Tooling & Ecosystem

1. How do you handle forms in React?
   Compare Formik, React Hook Form, or custom solutions.

2. How would you test React components?
   What’s the difference between unit, integration, and E2E in a React context?

3. How do you approach lazy loading and code splitting in a React app?

4. What is hydration in SSR apps (like Next.js)?
   What are common hydration errors and how do you fix them?

5. What’s the difference between useEffect and useLayoutEffect?
   When should you not use useLayoutEffect?

🧠 System Design & Experience-Based

1. Describe how you architected a complex component or feature in React.

2. How do you keep large-scale React apps maintainable?
   Folder structure, testing, conventions, documentation.

3. How do you handle feature toggles, experiments, or A/B testing in a React app?

4. What accessibility (a11y) principles do you follow when building React components?

5. What’s a challenge you faced with React in production and how did you solve it?