Top React Interview Questions Every Frontend Developer Should Know

Whether you’re preparing for your first React interview or aiming for a better role, this article walks through the most frequently asked React interview questions with easy-to-understand answers and practical insights.

1- what is React and why it is popular?
React as a popular JavaScript library used for building powerful user interfaces it’s key strength lies in its ability to create component based architecture which allows developers to create reusable UI components additionally React’s virtual doom can make a copy of the real Dom that minimizes direct Dom manipulation which significantly post performance

2- What is Signle Page Application or (SPA)?
SPA is a type of web application that loads a single html page and then instead of reloading the whole page only updates the affected parts of the page according to the users’s actions like only rendering the color change from light blue to pink this process results — Faster Load time — Better Responsiveness — Smoother user interactions

3- Is React the best choice for SEO?
No, plain React (client-side rendering) is not the best choice for SEO because search engines initially receive an almost empty HTML page and must rely on JavaScript to render the content, which can be slower and less reliable for indexing; however, when React is used with server-side or static rendering (like Next.js), it becomes very SEO-friendly.

4- what is JSX and how it differs from HTML?
JSX (JavaScript XML) is a syntax extension for JavaScript used in React that lets you write UI code that looks like HTML, but it is actually JavaScript. The key difference is that JSX is not HTML — it gets compiled into JavaScript function calls (React.createElement), which allows you to embed logic directly in your markup.

5- Explain the differences between functional and class components?
Functional components are simple JavaScript functions that return JSX and can be stateless or stateful depending on whether they use Hooks like useState, while class components are ES6 classes that extend React.Component and are always stateful because they manage state using this.state and lifecycle methods; functional components are cleaner, avoid the this keyword, make logic reuse easier with Hooks, and are the modern recommended approach in React, whereas class components are more verbose and mainly used in legacy code.

6- what is the difference between stateless and stateful component in react?
A stateless component does not manage its own state and simply renders UI based on the props it receives, while a stateful component maintains and controls its own data using state (with useState in functional components or this.state in class components), allowing it to handle user interactions, dynamic updates, and changing data over time.

7- what are props in react and how are they used?
Props (short for properties) are read-only inputs passed from a parent component to a child component in React, used to share data and configuration between components. They are passed as attributes in JSX, accessed inside the child component, and allow components to be reusable and dynamic, but they cannot be modified by the receiving component.

8- What is the difference between state and props in React?
Props and state are both used to manage data in React, but they differ in mutation and scope: props are immutable from the child component’s perspective and are passed from parent to child, while state is mutable and managed within the component itself, allowing the component to control and update its own data; additionally, props have an external scope (controlled by the parent), whereas state has a local scope (private to the component that owns it).

9- What are Controlled and uncontrolled components?
in React, controlled components are form elements (like inputs, selects) whose value is fully controlled by React state — meaning the component’s state drives the input value, and every change is handled via event handlers updating that state. In contrast, uncontrolled components manage their own internal state, and React accesses their current value using refs only when needed, without syncing the value through React state. Controlled components offer better control and validation, while uncontrolled components are simpler for quick, less interactive forms.

10- What is the purpose of the Key attribute in react lists?
The key attribute in React lists is used to uniquely identify each element in a list so that React can efficiently track, update, and reorder items when the list changes. It helps React minimize unnecessary re-renders by knowing which items have changed, been added, or removed. Without unique keys, React may re-render the entire list or cause UI bugs. Keys should be stable, unique, and consistent — usually an ID from your data, not the array index.

11- What a Fragment in React and why are they useful?
A Fragment in React is a way to group multiple elements without adding an extra DOM node (like a <div>). It lets you return multiple sibling elements from a component without wrapping them in an unnecessary container. This keeps the DOM cleaner and avoids unwanted styling or layout issues caused by extra wrappers. You can use it as <React.Fragment>…</React.Fragment> or the shorter syntax <>…</>. Fragments improve performance and maintain semantic HTML structure.

12- What is Virtual Dom, and how does React use it to improve performance?
The Virtual DOM is a lightweight, in-memory representation of the actual DOM. Instead of updating the real DOM directly, React first updates this virtual version, which is much faster to manipulate. React then compares the new Virtual DOM with the previous version (a process called diffing) to figure out the minimal set of changes needed. Finally, React applies only those specific updates to the real DOM. This selective updating greatly improves performance by reducing expensive direct DOM manipulations and making UI updates more efficient and smooth.

13- What are React life cycle methods, and when are they used?
React lifecycle methods are special methods in class components that run at specific points during a component’s existence — like when it’s created, updated, or removed from the UI. They let you perform actions such as fetching data, setting up subscriptions, or cleaning up resources. The main lifecycle phases are:

• Mounting: when the component is first added (constructor, render, componentDidMount)
• Updating: when props or state change (shouldComponentUpdate, render, componentDidUpdate)
• Unmounting: when the component is removed (componentWillUnmount)

In functional components, these lifecycle events are managed using React Hooks like useEffect.

Lifecycle methods are used to control side effects, optimize performance, and manage resources during a component’s life.

14- What do you understand by props drilling in React?
Props drilling in React refers to the situation where you pass data through multiple layers of components — from a top-level parent down to deeply nested child components — even if some intermediate components don’t need that data themselves. This can make the code harder to read and maintain because many components act as mere pass-throughs. Props drilling often signals the need for better state management solutions like Context API or state management libraries to avoid excessive and unnecessary prop passing.

15- What is Context API and how is it used to manage state?
The Context API in React is a built-in feature that allows you to share data (like state) across multiple components without having to pass props manually at every level — solving the “props drilling” problem. It creates a global-like state accessible by any component within its provider tree.

How it works:

1. You create a Context object.
2. Wrap your component tree with a Provider that holds the shared state or values.
3. Any nested component can consume that context directly using useContext (in functional components) or Context.Consumer (in class components).

16- What are higher-order components? Give an example?
A Higher-Order Component (HOC) is a function that takes a component as an argument and returns a new component function. This returned component function renders JSX, which usually includes rendering the original component passed in — potentially with additional props or behavior.

Get Ahmed Elsehrawy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

So basically:

• HOC = function(Component) ⇒ returns NewComponent
• NewComponent = function(props) ⇒ returns JSX (often <Component {...props} /> plus extras)

Your idea that the returned component function either returns JSX or the original component wrapped inside JSX is spot on!

17- Explain the concept of reconciliation in React?
Reconciliation in React is the process React uses to efficiently update the UI when a component’s state or props change. When data changes, React creates a new Virtual DOM tree and compares it with the previous one (a process called diffing) to determine the minimal set of changes needed. React then updates only the affected parts of the real DOM instead of re-rendering everything, which improves performance and keeps UI updates fast and predictable.

state or props change ⇒ new virtual Dom created diffing ⇒ comparing the differences

18- what is react portals and how it works and give me an example?
React Portals allow you to render a component’s UI outside its parent DOM hierarchy while still keeping it part of the same React component tree. This is useful when UI elements like modals, tooltips, or dropdowns need to visually escape CSS constraints such as overflow: hidden or z-index issues.

How it works: React keeps the component logically where it is in the React tree (so props, state, and context still work normally), but mounts its DOM nodes into a different DOM element using ReactDOM.createPortal.

19- why React portals are useful?
React Portals are useful because they allow components to be rendered outside their parent DOM hierarchy while still remaining part of the same React component tree. This solves common UI problems such as z-index conflicts, overflow: hidden issues, and positioning constraints that occur with modals, tooltips, dropdowns, and popovers. Portals let these components visually “escape” their parent containers without breaking React features like state, props, context, or event handling, making them a clean and reliable solution for complex UI layouts.

20- How does React Router handle navigation in single-page app?
React Router handles navigation in a single-page application by using the HTML5 History API to change the browser URL without reloading the page. When the URL changes, React Router matches it against defined routes and renders the corresponding component, allowing seamless client-side navigation while preserving application state and delivering a fast, app-like user experience.

21- What is React strict mode and how does it help developers?
React Strict Mode is a development-only tool that helps developers identify potential problems in their applications. It doesn’t affect production builds, but it intentionally runs certain lifecycle methods and Hooks twice to detect side effects, warns about deprecated APIs, unsafe lifecycles, and unexpected behavior, and highlights issues like improper state updates or effects. Overall, it helps catch bugs early and encourages writing safer, future-proof React code.

22- What is the difference between useEffect, useLayoutEffect, and useMemo?
useEffect runs after the component renders and the browser paints, making it suitable for side effects like data fetching and subscriptions, while useLayoutEffect runs synchronously after DOM updates but before the browser paints, which is useful for reading or modifying layout to avoid visual flicker; useMemo is different in that it does not perform side effects but memoizes expensive calculations to prevent unnecessary recomputation on re-renders.

23- What are the rules of Hooks and why are they important?
The rules of Hooks state that hooks must be called only at the top level of a React function and never inside loops, conditions, or nested functions, ensuring that hooks are called in the same order on every render; this consistency allows React to correctly associate hook state with components and prevents unpredictable bugs.

24- What is lifting state up in React?
Lifting state up is the process of moving shared state to the closest common parent component so multiple child components can access and update the same data through props, helping maintain a single source of truth and improving synchronization between related components.

25- What causes a component to re-render in React?
A React component re-renders when its state changes, when it receives new props, when its parent component re-renders, or when the context it consumes changes, allowing React to keep the UI in sync with the underlying data.

26- How do you optimize performance in React?
React performance can be optimized by preventing unnecessary re-renders using React.memo, memoizing functions with useCallback, caching expensive calculations with useMemo, splitting code with lazy loading, and ensuring keys and state updates are used correctly.

27- What is memoization in React?
Memoization in React is a technique used to cache the result of expensive computations or function references so they are reused across renders unless their dependencies change, commonly implemented using useMemo for values and useCallback for functions.

28- Why is using array index as a key a bad idea?
Using array index as a key can cause UI bugs when list items are reordered, inserted, or removed because React may incorrectly match components, leading to issues like wrong state being preserved or unexpected re-renders.

29- What is an Error Boundary in React?
An Error Boundary is a React class component that catches JavaScript errors in its child component tree during rendering or lifecycle methods and displays a fallback UI instead of crashing the entire application, improving stability and user experience.

30- What is the difference between Context API and Redux?
The Context API is best suited for sharing simple global state like themes or authentication, while Redux is designed for complex state management with predictable state updates, middleware support, and advanced debugging tools, making it more scalable for large applications.

31- What is Concurrent Rendering in React?
Concurrent Rendering is a React feature that allows rendering work to be interrupted and resumed, enabling React to prioritize urgent updates like user interactions and keep the UI responsive even during heavy rendering tasks.

32- Why did React choose one-way data flow?
React uses one-way data flow to make applications predictable by ensuring data flows from parent to child, which simplifies debugging, improves maintainability, and prevents unexpected side effects caused by uncontrolled data mutations.

33- What happens when you call setState or a state setter function?
When setState or a state setter is called, React schedules a state update, re-renders the component with the new state, compares the new Virtual DOM with the previous one, and applies only the necessary changes to the real DOM efficiently.

34- What is the JavaScript event loop, and how does it manage asynchronous operations?
The JavaScript event loop continuously checks the call stack and the callback queue. When the call stack is empty, it takes the first task from the callback queue and pushes it onto the call stack. This process allows JavaScript to handle asynchronous operations, such as timers, network requests, and promises, without blocking the main thread.

35- What is the difference between the call stack and the callback queue in JavaScript?
The call stack is a data structure that keeps track of function calls in JavaScript. When a function is invoked, it’s added to the call stack, and when it finishes, it’s popped off. The callback queue, on the other hand, holds functions that are waiting to be executed once the call stack is empty. This separation ensures that asynchronous tasks are handled in an orderly and non-blocking manner.

36- How does the microtask queue differ from the macrotask queue in JavaScript?
The microtask queue handles tasks that need to be executed after the current synchronous code completes but before the next macrotask (like setTimeout or setInterval) runs. Microtasks include promises and queueMicrotask. The macrotask queue handles tasks like I/O operations, timers, and events. The event loop gives priority to the microtask queue, meaning that all microtasks are processed before the next macrotask, ensuring that promise resolutions are handled promptly.

37- What is Hoisting in JavaScript?
Hoisting is a JavaScript mechanism where variable and function declarations are moved (“hoisted”) to the top of their containing scope during the compile phase, before the code actually runs. This means you can use functions and variables before you declare them in the code — but with some important differences depending on how they are declared.