Top 30 Intermediate React Interview Questions (Hooks Deep Dive 2026)

🚀 Introduction

If you already know the basics of React, the next step is mastering intermediate concepts—especially hooks and performance optimization.

This post covers the top 30 intermediate React interview questions that are frequently asked in real interviews.

📌 Top 30 Intermediate React Interview Questions and Answers

1. What is useEffect lifecycle?

useEffect runs after render and can mimic componentDidMount, componentDidUpdate, and componentWillUnmount.

2. What is dependency array in useEffect?

It controls when the effect runs. Empty array means it runs once.

3. What happens if no dependency array is provided?

The effect runs after every render.

4. What is cleanup function in useEffect?

It is used to clean up resources like timers or subscriptions.

5. What is useMemo?

useMemo is used to memoize expensive calculations.

6. What is useCallback?

useCallback memoizes functions to prevent unnecessary re-renders.

7. Difference between useMemo and useCallback?

useMemo returns a value, useCallback returns a function.

8. What is React Context API?

It allows sharing data across components without prop drilling.

9. What is useContext?

Hook to consume values from context.

10. What is prop drilling problem?

Passing props through multiple layers unnecessarily.

11. How to avoid prop drilling?

Using Context API or state management libraries.

12. What is useReducer?

Alternative to useState for complex state logic.

13. Difference between useState and useReducer?

useState is simple, useReducer is for complex logic.

14. What is custom hook?

A reusable function using React hooks.

15. What are controlled vs uncontrolled inputs?

Controlled uses state, uncontrolled uses refs.

16. What is React.memo?

Prevents re-render if props do not change.

17. What is re-rendering?

Updating component UI when state or props change.

18. What causes re-render?

State change
Props change
Parent re-render

19. What is key prop importance?

Helps React identify list items efficiently.

20. What is lazy loading in React?

Loading components only when needed using React.lazy.

21. What is Suspense fallback?

UI shown while lazy component loads.

22. What is code splitting?

Splitting code into smaller bundles.

23. What is forwardRef?

Allows passing ref to child components.

24. What is useRef vs createRef?

useRef persists across renders, createRef does not.

25. What is batching in React?

Combining multiple state updates into one render.

26. What is StrictMode double rendering?

React intentionally renders twice in development for debugging.

27. What is hydration?

Attaching event listeners to server-rendered HTML.

28. What is portal in React?

Rendering child into different DOM node.

29. What is error boundary?

Component that catches JavaScript errors in UI.

30. What are best practices for performance?

Use memoization
Avoid unnecessary renders
Use lazy loading

🎯 Conclusion

Mastering these intermediate React questions will significantly improve your chances of cracking frontend developer interviews.

❓ FAQs

Q1: Are React hooks important for interviews?

Yes, most intermediate and advanced interviews focus heavily on hooks.

Q2: Which hook is most important?

useEffect, useState, and useContext are the most commonly asked.

Q3: How to master React?

Build projects and practice interview questions regularly.

🔗 Internal Linking

👉 Previous Post: React Basic Interview Questions (Post 1)

👉 Next Post: Advanced React Interview Questions (Post 3)

📢 Tags

React Hooks, React Interview Questions, useEffect, Frontend Developer, JavaScript, Web Development