React Interview Questions (All 4 Levels)
Level 1: Basic React (Beginner)
● 1. What is React?
● 2. What is JSX?
● 3. Difference between class and className in JSX?
● 4. Difference between functional and class components?
● 5. What are props?
● 6. What is state?
● 7. Controlled vs Uncontrolled components?
● 8. How do you render lists in React?
● 9. What is the purpose of the 'key' attribute?
● 10. How does event handling work in React?
● 11. How to define default props?
● 12. What is component nesting?
● 13. Difference between HTML and JSX?
● 14. How to apply inline styles?
● 15. How does ReactDOM.render() work?
● 16. What is component reusability?
● 17. What is one-way data binding?
● 18. What is the role of 'export' and 'import'?
● 19. Why use fragments in React?
● 20. What is React StrictMode?
● 21. How to access props in functional components?
● 22. How to perform conditional rendering?
● 23. How to create a button click event?
● 24. Is state update synchronous or asynchronous?
● 25. What is the component rendering lifecycle?
● 26. How does setState() work?
● 27. What happens if you mutate state directly?
● 28. Can props be changed inside a component?
● 29. Difference between default and named exports?
● 30. What is the use of React DevTools?
● Level 2: Intermediate React
● 1. How does useState() work?
● 2. What is the purpose of useEffect()?
● 3. When is the cleanup function in useEffect called?
● 4. How do you handle multiple useEffects?
● 5. Why use useRef()?
● 6. When to use useMemo()?
● 7. Difference between useCallback and useMemo?
● 8. How does useContext() work?
● 9. What is props drilling?
● 10. What is lifting state up?
● 11. How to simulate componentDidMount in functional components?
● 12. What is React Router?
● 13. How do <Route> and <Link> work?
● 14. How to implement nested routing?
● 15. How to navigate programmatically in React Router?
● 16. What are route parameters?
● 17. What does useNavigate() do?
● 18. How do you build a form in React?
● 19. Controlled Form vs Uncontrolled Form?
● 20. How to perform form validation?
● 21. Methods for conditional rendering?
● 22. How to apply dynamic className?
● 23. How do you handle checkbox input in a form?
● 24. How to handle file inputs in React?
● 25. How to pass state as props?
● 26. How does parent-child communication work?
● 27. How to create a custom hook?
● 28. What is the use of useId()?
● 29. How does Context Provider and Consumer work?
● 30. How to sync state with local storage?
● Level 3: Advanced React
● 1. What is Context API?
● 2. What is Redux and why use it?
● 3. Difference between Redux and Context API?
● 4. What does React.memo() do?
● 5. How does useCallback improve performance?
● 6. When is useMemo necessary?
● 7. What is the Virtual DOM?
● 8. How does reconciliation work in React?
● 9. How to lazy load a component?
● 10. How do React.lazy and Suspense work?
● 11. What are error boundaries?
● 12. How to configure Redux store?
● 13. What are actions and reducers in Redux?
● 14. What is middleware in Redux (Thunk, Saga)?
● 15. What is batching in React?
● 16. What is concurrent rendering?
● 17. What is server-side rendering (SSR)?
● 18. What is client-side rendering (CSR)?
● 19. What is hydration in React?
● 20. What is code splitting?
● 21. How to enable lazy loading in Webpack?
● 22. How to do dynamic imports in React?
● 23. What is PropTypes?
● 24. How to write components in TypeScript?
● 25. What is useImperativeHandle?
● 26. What are React Portals?
● 27. What are Higher Order Components (HOC)?
● 28. How to handle controlled animations in React?
● 29. Component composition vs inheritance – which is better?
● 30. What do useTransition and useDeferredValue do?
● Level 4: Expert / Real-World Scenarios
● 1. How do you design the architecture of a large React app?
● 2. What are micro frontends?
● 3. What are server components?
● 4. How do you monitor web vitals in React?
● 5. How to make a React app mobile responsive?
● 6. How do you test React apps using Jest and RTL?
● 7. Difference between unit test and integration test?
● 8. How to test a custom hook?
● 9. How to setup a CI/CD pipeline for React?
● 10. How to implement SSR in Next.js?
● 11. Difference between React Native and React.js?
● 12. Where to deploy React apps (Netlify, Vercel, Firebase)?
● 13. What are React security concerns?
● 14. How to prevent XSS and CSRF in React apps?
● 15. How to manage sessions in React?
● 16. How to implement authentication using JWT?
● 17. How to split code for optimization?
● 18. Difference between chunk splitting and lazy loading?
● 19. How to improve Lighthouse performance score?
● 20. What is React Query?
● 21. How to implement infinite scroll in React?
● 22. How to ensure accessibility (a11y)?
● 23. How to build multilingual apps (i18n)?
● 24. How to use WebSocket in React?
● 25. How to create a PWA with React?
● 26. Why use Redux Toolkit?
● 27. How to structure folders in scalable React apps?
● 28. How to persist state in React apps?
● 29. How to monitor production crashes live?
● 30. How to debug memory leaks in React apps?
