50 React Interview Questions You Must Know in 2026 (Full Q&A)

React is a free JavaScript library. We use it to build user interfaces, or UIs. We build these UIs by creating reusable pieces of code. We call these pieces components.

React has a few main features. It uses JSX, which lets us write code that looks like HTML. It is built with components, so we can reuse code. It uses a Virtual DOM, which makes it very fast. It also has a one-way data flow, which makes our app predictable.

JSX means JavaScript XML. It is a special syntax. It lets us write code that looks like HTML right inside our JavaScript files. This makes it much easier for us to see what our components will look like.

The Virtual DOM is a copy of the real DOM. React keeps this copy in its memory. When we change something in our app, React updates this virtual copy first. This is very fast because it is just a simple JavaScript object.

When our app’s data changes, React creates a new Virtual DOM. Then, it compares this new one with the old one. This comparison is called “diffing.” React finds the smallest change possible. It then updates only that one small part of the real DOM. This saves a lot of work and makes our app very fast.

We use both state and props for data. Props are for passing data from a parent component down to a child component. A child component cannot change its props. State is data that the component manages itself. It is private. When the state changes, the component re-renders.

Class components are the older way to make components. They use an ES6 class and have a render method. Functional components are now the standard way. They are just simple JavaScript functions. We use React Hooks to add state and other features to them.

Keys are a special attribute. We must use them when we create a list of elements. We must give each item in the list a unique key. This helps React know which item was added, changed, or removed. It is very important for performance.

Synthetic events are React’s own event system. They are a wrapper around the browser’s normal events. We use them because all browsers handle events a little differently. React’s synthetic events fix this problem. They make events work the exact same way in every browser.

We often use these terms when talking about forms. In a controlled component, React controls the input’s value using state. In an uncontrolled component, the DOM itself controls the value. We use a ref to get the value when we need it.

This is a special prop. It is not passed in the same way as other props. It is the content we put between the opening and closing tags of our component. This is very useful for making “wrapper” components, like a Card or a Dialog.

These are special methods for class components. They run at different times in a component’s life. There are three phases: Mounting (when it is created, like componentDidMount), Updating (when state or props change, like componentDidUpdate), and Unmounting (when it is removed, like componentWillUnmount).

A Higher-Order Component, or HOC, is an advanced pattern. It is a function that takes a component as an argument. It returns a new, wrapped component. This new component usually has extra props or new logic.

Fragments are a simple tool. They let us group a list of children together. We do this without adding an extra div to the HTML. We can use <React.Fragment> or just the empty tags <>...</>.

We have many options for styling. We can use inline styles, which are JavaScript objects. We can import a normal CSS file. We can use CSS Modules, which keep styles local to one component. Or we can use a CSS-in-JS library like styled-components.

Error Boundaries are special components. They catch JavaScript errors in any of their child components. This is very important. It stops one error from crashing our entire application. Instead, we can show a nice error message to the user.

Hooks are special functions. They let us “hook into” React features from our functional components. For example, the useState hook lets us add state. Hooks let us use state and other features without writing a class.

There are two main rules we must follow. First, we must only call Hooks at the top level of our function. We cannot call them inside loops or if statements. Second, we must only call Hooks from a React function component or a custom hook.

This is the most common hook. We use it to add state to our component. It gives us back two things in an array: the current state value, and a function to update that value.

This hook lets us run “side effects.” Side effects are things like fetching data from a server, setting a timer, or changing the DOM. useEffect handles what the old lifecycle methods used to do.

We use useRef for two main reasons. First, it lets us get direct access to a DOM element. Second, it lets us store a value that can change without causing the component to re-render.

This hook makes using the Context API very simple. It lets any component “consume” or read a value from a Context Provider. We do not need to pass props down through many components.

This hook is an option instead of useState. It is very useful when our state is complex. It works like a Redux reducer. We give it a state and an “action,” and it returns the new state.

We use both of these hooks for performance. We use useMemo to save the result of a big calculation. It only re-runs if its inputs change. We use useCallback to save the function itself. This stops it from being re-created on every render.

A custom hook is a function we create. Its name must start with “use,” like “useFetch.” We make custom hooks to share logic between components. For example, we could make a useFetch hook to get data from a server.

This is a newer hook for performance. It lets us tell React that a state update is not urgent. This keeps our app fast and responsive. For example, a search input can stay fast while the search results update slowly in the background.

Prop drilling is a common problem in React. It is when we pass props down through many layers of components. The components in the middle do not even need the prop. They just pass it along. This makes our code hard to read and maintain.

We can avoid prop drilling by using a state management tool. For many cases, the React Context API is a great built-in choice. For very complex apps, we might use an external library like Redux or Zustand.

The Context API is React’s built-in way to share data. It lets us pass data to all components in a tree, without passing props. We create a “Provider” to hold the data, and components can “consume” it. This is one of the most important React interview questions.

We should use Context for data that is “global” to our app. It is perfect for things that do not change very often. Good examples are the current user, a website theme, or a language preference.

Redux is a popular library for managing state. It gives us a single, central “store” for our entire application’s state. This makes our state changes predictable and easy to track.

Redux has three main ideas. One, there is a single source of truth (the store). Two, the state is read-only (we must send an “action” to change it). Three, changes are made with pure functions (called “reducers”).

This is a very common question. We use Context API for simpler, global data that does not change a lot, like a theme. We use Redux for complex state that changes often, like a big shopping cart. Redux is more work to set up, but it is very powerful.

React Router is the most popular library for navigation in React. It lets us build a Single-Page Application (SPA). This means we can change “pages” and update the URL without a full page refresh. This makes our app feel very fast.

In server-side routing, clicking a link reloads the entire page from the server. In client-side routing, React Router stops the reload. It just changes the URL and swaps the correct component onto the screen.

First, we wrap our whole app in a component, usually <BrowserRouter>. Then, we use the <Routes> component to list our routes. Inside, each <Route> has a path (like "/about") and an element (like {<AboutPage />}).

We create a dynamic route by adding a colon : to the path. For example, path="/user/:id". This tells React Router that the :id part can be any value.

We use a special hook from React Router called useParams. If our route path is /user/:id, we can call const { id } = useParams() in our component. The id variable will hold the value from the URL.

We can use React.memo, useMemo, and useCallback to stop needless re-renders. We can also use “lazy loading” with React.Suspense to split our code. Using keys correctly in lists is also very important.

The main way is to use React.memo. This is a tool we wrap our component with. It tells React to only re-render the component if its props have changed.

Memoization is a fancy word for “caching” or “saving” a value. We use useMemo to save the result of a slow calculation. We use useCallback to save a function so it is not re-created on every render.

React.memo is a Higher-Order Component. We wrap it around our component. It “memoizes” the component. React will then skip re-rendering it if its props are the same as the last render.

Lazy loading, or code-splitting, helps our app load faster. We use React.lazy to tell React to only download the code for a component when we first need it. We use React.Suspense to show a “loading…” message while we wait.

This is the name of the process React uses to update the UI. It is the algorithm that compares the new Virtual DOM with the old one (the “diffing”) and decides the most efficient way to update the real DOM.

React Fiber is the name of React’s new reconciliation engine. The old engine did all its work at once. Fiber is new because it can break up the work into small pieces. It can pause, resume, and prioritize tasks. This makes our app feel much smoother.

Hydration is an important process. When we use server-side rendering, the server sends plain HTML first. This is fast, but it is not interactive. Hydration is the process where React, on the client, “wakes up” that static HTML and attaches all the event listeners.

Suspense is a feature that lets our components “pause” while they wait for something. We use it with React.lazy to wait for code. We can also use it to wait for data from a server. It lets us show a fallback, like a loading spinner, while we wait.

These are a new type of component. They run only on the server. They can read files or talk to a database. They are very fast because they send zero JavaScript to the client. This is a very new and important topic for React interview questions.

Strict Mode is a helper tool for development. We wrap our app in <React.StrictMode>. It helps us find common bugs by running some things twice. It does not run in production, so it does not slow our app down for users.

We cannot pass props up from a child. The correct way is for the parent component to pass a function down to the child as a prop. The child component then calls that function and passes its data as an argument.