React Interview Questions
Prepare for React interviews with the most commonly asked questions. From hooks to component lifecycle, master the concepts that interviewers love to test. Practice with SwipeInterview's interactive platform for best results.
What is JSX?
Answer: JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code in your React components. It gets compiled to regular JavaScript function calls by Babel. JSX makes React components more readable and allows you to use the full power of JavaScript within your markup.
What is the difference between state and props?
Answer: Props are passed from parent to child components and are immutable. State is managed within a component and can be changed using setState (class) or useState (hooks). Props enable component communication, while state enables component interactivity and dynamic behavior.
Explain the useEffect hook
Answer: useEffect lets you perform side effects in functional components. It runs after render and can optionally clean up. The dependency array controls when it runs: empty array runs once, no array runs every render, with dependencies runs when they change. It replaces componentDidMount, componentDidUpdate, and componentWillUnmount.
What is the Virtual DOM?
Answer: The Virtual DOM is a lightweight JavaScript representation of the actual DOM. React maintains a virtual copy, compares it with the previous version when changes occur (diffing), and updates only the changed parts of the real DOM (reconciliation). This makes updates much faster than manipulating the DOM directly.
Explain React reconciliation and the diffing algorithm
Answer: Reconciliation is React's process of updating the DOM efficiently. When state changes, React creates a new virtual DOM tree and compares it with the previous one. The diffing algorithm makes assumptions (same-level comparison, component type matters, keys help identify elements) to optimize from O(n³) to O(n) complexity.
What are React portals and when would you use them?
Answer: Portals provide a way to render children into a DOM node outside of the parent component's DOM hierarchy. Created with ReactDOM.createPortal(), they're useful for modals, tooltips, and dropdowns where you need to break out of CSS overflow/z-index constraints while maintaining React's event system.
Master 280+ React Questions
Get comprehensive coverage of React concepts with SwipeInterview's swipe-based learning.
Start Learning React