Top React JS Interview Questions

Top 50 React JS interview questions with curated answers across core concepts, practical scenarios, and interview-ready fundamentals.

Top 50 React JS Interview Questions

  1. What are the potential performance implications of using an unstable key (like `Math.random()`) when rendering lists in React?
  2. A React app needs to send a custom `X-Tenant-ID` header to an API. Which server-side CORS response header is required for the browser to allow this request?
  3. What is the key difference between how a `Map` and a `WeakMap` handle their keys, and what is the primary consequence of this difference?
  4. What is the most robust and modern way to handle cleanup of GSAP animations and triggers within a React component to prevent memory leaks?
  5. For managing shared state in a highly distributed React application deployed across multiple edge nodes, which of the following approaches is MOST architecturally sound?
  6. What is a potential drawback of using Zustand's `persist` middleware, and how can you mitigate it?
  7. What happens if you subscribe to the entire state object in a component (e.g., `const state = useStore()`)?
  8. In a nested route structure like `/users/:userId/posts/:postId`, how can a deeply nested component rendering for a specific post access the `userId`?
  9. What is the most effective way to prevent unexpected behavior caused by rapidly changing routes in a React application using React Router v6?
  10. In Cypress, how do you correctly test an application flow that involves a redirect after a form submission?
  11. The following code fetches data but has a bug that can cause a memory leak. What is the primary cause of this bug?
  12. The following code has a performance bug that causes `ThemeComponent` to re-render unnecessarily. What is the cause of this bug?
  13. This async action to fetch user data has a potential bug. What is the issue?
  14. In this custom virtualization component, what is the primary performance bottleneck?
  15. In the provided code, a parent component re-renders due to a state change unrelated to the list data. Why does this cause a performance issue for the `FixedSizeList`?
  16. This code is broken and will cause an error: `Error: You're importing a component that needs to be bundled on the server.` What is the bug?
  17. This code fails, and the error says the `onClick` prop is not serializable. Why?
  18. This code, which tries to fetch data, will throw an error. What is the bug?
  19. Compare the developer experience of applying one-off style customizations in Material-UI versus Chakra UI.
  20. Compare and contrast the theming capabilities of Material-UI and Chakra UI. Discuss their approaches to theme customization, ease of use, and flexibility.
  21. Discuss the advantages of using a hook like Chakra UI's `useDisclosure` for managing modal state compared to a manual `useState` approach.
  22. Describe how you would debug a Netlify deployment that fails when trying to install a private npm package from GitHub Packages.
  23. Describe a scenario where using Firebase Hosting alongside Firebase Functions might lead to performance issues related to 'cold starts'. How can these issues be mitigated?
  24. Describe a scenario where using Firebase Hosting might be less suitable than Netlify or Vercel for a React application. Explain the trade-offs involved.
  25. Describe a scenario where you encountered a build timeout issue while deploying a large static site (e.g., using Gatsby) to Netlify, and explain how you resolved it.
  26. Compare and contrast the core philosophies of React Hook Form and Formik, specifically regarding their approach to managing form inputs (uncontrolled vs. controlled).
  27. Describe a scenario where using the Reselect library with Redux would significantly improve performance. Explain how Reselect achieves this optimization.
  28. Describe a scenario where using a public CORS proxy might introduce security vulnerabilities into a React application. How could you mitigate these risks?
  29. Describe a scenario where you encountered a CORS error in a React application with a microservice architecture. Detail the steps you took to diagnose and resolve the issue.
  30. Describe a situation where you would need to use the `Access-Control-Allow-Credentials` header in your CORS configuration, and explain why it's necessary in that scenario.
  31. Both `Map` and `WeakMap` can associate data with an object key. Explain the performance and memory trade-offs involved in choosing between them.
  32. Describe a scenario where using a `WeakSet` would be advantageous over a regular `Set`. Explain the tradeoffs involved.
  33. Describe a practical use case for a `WeakSet` where a regular `Set` would be inappropriate. Explain the specific problem that `WeakSet` solves in this scenario.
  34. Describe a practical scenario where using a WeakMap would be beneficial in a React application. Explain why a WeakMap is preferred over a regular Map in this scenario.
  35. Describe a scenario where using `useContext` is not the optimal solution and suggest an alternative state management approach, explaining why it's better suited.
  36. Explain the best practices for integrating GSAP into a React application, focusing on lifecycle management and cleanup to prevent memory leaks.
  37. Describe how you would implement responsive animations with GSAP in a React application that adapt to different screen sizes. What modern GSAP features would be most beneficial?
  38. Describe how to handle a GSAP animation that needs to react to a user interaction, like a hover event, while preventing conflicts if the user hovers in and out rapidly.
  39. Explain how to manage a complex carousel animation with GSAP in React, where slides can be added or removed dynamically and animations need to adjust accordingly.
  40. Describe a scenario where using Zustand's `persist` middleware might not be the ideal solution and suggest an alternative approach. Explain the rationale behind your choice of alternative.
  41. Describe a situation where using Zustand might not be the ideal choice for state management, and suggest an alternative solution. Justify your choice.
  42. Describe a scenario where using nested Routes within a React application leads to unexpected rendering behavior, and explain how to effectively debug and resolve such issues.
  43. Describe a common strategy for implementing protected (authenticated) routes within a React application using React Router v6.
  44. Explain the concept of 'lazy loading' in the context of React Router and describe how to implement it for optimal performance. What are the advantages and disadvantages?
  45. Describe a scenario where using the Reselect library would significantly improve performance in a Redux application, and explain how it achieves this.
  46. Describe a scenario where using React.lazy and Suspense might not be the optimal solution for performance optimization, and explain why. Suggest an alternative approach for that scenario.
  47. Compare and contrast the core architecture of Cypress and Playwright. How do their architectural differences impact test execution and capabilities?
  48. Describe an architecture where combining React with edge computing significantly improves a real-time Industrial IoT (IIoT) application, focusing on data locality and minimizing latency.
  49. The following code snippet attempts to render a list of items. Identify the potential performance issues and provide a corrected version.
  50. The following code snippet demonstrates a common but subtle issue when using `<Outlet>` in nested routes. Identify the problem and explain when this code would be considered buggy.