Top 20 React interview questions cover fundamental concepts, modern hooks,
and advanced topics related to performance and architecture. This list is updated
to reflect the most common questions asked in 2025.
1. What is React?
React is a popular, open-source JavaScript library for building user interfaces. It's
maintained by Meta (formerly Facebook) and a community of individual
developers and companies. React is known for its component-based architecture
and its efficient use of a Virtual DOM.
2. Explain the Virtual DOM and how it works.
The Virtual DOM (VDOM) is a lightweight, in-memory representation of the
actual DOM. When the state of a component changes, React first creates a new
Virtual DOM tree. It then uses a process called diffing to compare this new tree
with the old one, identifying the minimal changes required. Finally, it applies only
these changes to the real DOM, making updates much faster and more efficient
than manipulating the real DOM directly.
3. What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript. It allows you to write
HTML-like code directly within your JavaScript files. JSX is not understood by
browsers, so it must be transpiled into plain JavaScript using a tool like Babel
before it can be rendered.
4. What are the differences between functional and class components?
Functional Components: Simple JavaScript functions that accept props
as an argument and return a React element. With the introduction of
Hooks, they can now manage state and lifecycle features. They are
generally preferred for new development.
Class Components: ES6 classes that extend React.Component and
require a render() method to return a React element. They manage state
using this.state and this.setState().
5. Explain the concepts of props and state.
Props (Properties): props are a way to pass data from a parent
component to a child component. They are read-only and immutable.
State: state is a local data store for a component. It holds data that can
change over time. When state is updated, the component re-renders to
reflect the new data.
6. What are React Hooks, and why were they introduced?
React Hooks are functions that let you "hook into" React state and lifecycle
features from functional components. They were introduced in React 16.8 to
allow developers to use state and other features without writing a class. This
makes code cleaner, more reusable, and easier to test.
7. What is the useState hook?
useState is a React Hook that allows you to add state to functional components.
It returns an array with two elements: the current state value and a function to
update it.
8. What is the useEffect hook?
useEffect is a React Hook that is used to handle side effects in functional
components. A side effect is anything that affects something outside the
component, such as:
Fetching data from an API.
Manually manipulating the DOM.
Setting up subscriptions or event listeners.
The second argument is a dependency array, which controls when the effect
runs.
9. How do you pass data from a child component to a parent
component?
You cannot pass data directly from a child to a parent using props. The standard
way is to pass a callback function from the parent to the child via props. The
child can then call this function, passing the necessary data as an argument, and
the parent can handle the data.
10. What is "prop drilling," and how can you avoid it?
Prop drilling is the process of passing props down through multiple layers of
nested components, even if the intermediate components don't need the data. It
can make code difficult to read and maintain. You can avoid it using:
Context API: Provides a way to share state globally without prop drilling.
State Management Libraries: Libraries like Redux, Zustand, or Jotai are
designed for managing global state in large applications.
11. What is the purpose of the key prop when rendering lists?
The key prop is a special string attribute you must include when creating a list of
elements. It helps React identify which items have changed, been added, or been
removed. Without a unique key, React's diffing algorithm can be inefficient,
leading to performance issues and potential bugs. Keys should be unique and
stable.
12. Explain the concept of Lifting State Up.
Lifting state up is a common pattern for sharing state between multiple
components. It involves moving the state to the closest common ancestor of the
components that need to share it. The ancestor component then passes the
state down to its children via props.
13. What are controlled and uncontrolled components?
Controlled Components: A form element (like an input) whose value is
managed by React's state. The component's state is the "single source of
truth."
Uncontrolled Components: A form element whose value is managed by
the DOM itself. You can access the value using a ref.
14. What is a Higher-Order Component (HOC)?
A Higher-Order Component is a design pattern in which a function takes a
component as an argument and returns a new component with enhanced
functionality. HOCs are used for code reuse, state abstraction, and prop
manipulation.
15. What are React Fragments?
React Fragments are a feature that allows you to group a list of children
without adding extra nodes to the DOM. This is useful when a component needs
to return multiple elements but you don't want to wrap them in a <div> which
could break your CSS layout.
16. How do you optimize a React application's performance?
Common optimization techniques include:
Using React.memo: A higher-order component that prevents a functional
component from re-rendering if its props have not changed.
Using useCallback and useMemo hooks: These hooks memoize
functions and values to prevent unnecessary re-creations on every render.
Lazy Loading and Code Splitting: Using React.lazy and Suspense to
load components and code bundles only when they are needed.
Virtualization: For long lists, using libraries like react-virtualized or react-
window to only render the visible items.
17. What is the Context API?
The Context API is a built-in React feature that provides a way to pass data
through the component tree without manually passing props at every level. It's
ideal for global data like themes, user authentication, or a user's language
preference.
18. What are refs in React?
Refs (short for references) provide a way to access DOM nodes or React elements
created in the render method. They are primarily used for:
Managing focus, text selection, or media playback.
Imperatively triggering animations.
Integrating with third-party DOM libraries.
19. How do you handle routing in a single-page application (SPA)?
React applications use a library like React Router to handle routing. It allows
you to create different "routes" or pages within a single-page application without
the browser performing a full page reload.
20. When should you use useReducer instead of useState?
useReducer is an alternative to useState for managing state. You should use
useReducer when:
You have complex state logic that involves multiple sub-values.
The next state depends on the previous state.
You need to manage state in a more predictable way, similar to how Redux
works.
