React Interview Questions: Core Concepts Explained

React interviews cover a predictable set of topics. Interviewers want to know whether you understand what React does for you, what it does not, and which parts of a project are React versus the tooling around it.

That last distinction causes most of the confusion. A React project involves a package manager, a compiler, a bundler, a state library, and an HTTP client, and none of those are React. This guide separates them.

1. What React actually is

React is a JavaScript library for building user interfaces. It is not a framework, and it does not handle routing, data fetching, or storage on its own.

The naming trips people up. The full name of React and the difference between React and ReactJS come down to the same point: React, React.js, and ReactJS all refer to the same library. The suffix is a convention for naming JavaScript libraries, not a different product.

React UI refers to the interface layer you build with it, and there are separate component libraries that provide ready-made UI elements on top.

2. JSX and Babel

JSX is a syntax extension that lets you write markup inside JavaScript. It looks like HTML, which is why people ask about XML in React: JSX stands for JavaScript XML, and its tag syntax follows XML rules more strictly than HTML does. Every tag must be closed, and attributes use camelCase.

Browsers do not understand JSX. Something has to convert it into plain JavaScript function calls first, and that something is usually Babel. Babel is a compiler that turns JSX and newer JavaScript syntax into a form that older browsers can run. This is a good interview answer because it shows you know JSX is not magic, it is a transformation step.

3. Rendering and reconciliation

Rendering in React means producing a description of what the UI should look like for the current state. React then updates the actual page to match.

There are two related uses of the word, which is why the render() method is asked about separately. In class components, render() is the method that returns the element tree. In function components, the function body itself plays that role.

The part interviewers probe is what happens between renders. React builds a tree of elements, compares it against the previous tree, and applies the smallest set of changes to the page. That comparison step is why people ask which algorithm React uses. It is a diffing algorithm, and the process is called reconciliation. React uses heuristics rather than a general tree comparison, which is why keys on list items matter so much: they tell React which items are the same across renders.

4. State

setState is the class component API for updating state and telling React to re-render. Two things about it come up constantly in interviews. It does not update state immediately, and React may batch several calls together. If your new value depends on the old one, pass a function rather than an object, or you can read a stale value.

Function components use the useState hook for the same purpose, and the same batching behavior applies.

For state shared across many components, projects often reach for a separate library. Redux is the best-known one. It keeps application state in a single store and updates it through plain functions, which makes changes easier to trace. It is not part of React, and most small applications do not need it.

5. Data fetching

React does not fetch data for you. You use the browser's fetch or a library.

Axios is the most common library choice. It is an HTTP client that handles JSON conversion, error cases, and request configuration with less boilerplate than raw fetch.

Both approaches return promises, which is why promises in React come up. A promise represents a value that is not available yet. You handle it with .then() or with async and await, and in a component you usually start the request in an effect and store the result in state.

What you are calling is normally an API, most often a REST API. React sits entirely on the client side of that boundary.

That boundary explains a question people ask often: which database is best for ReactJS. React does not connect to a database at all. A backend service talks to the database, and React talks to that service over HTTP. Saying this clearly in an interview is a strong signal that you understand the architecture.

Caching in React usually means avoiding repeat network requests or repeat computation, and it is handled by data libraries and memoization rather than by React alone.

6. Tooling around a React project

This is the group candidates most often get wrong, because none of it is React itself.

npm is the package manager. It installs React and every other dependency and records them in a manifest file so the project can be rebuilt.

Node in a React project means Node.js, the JavaScript runtime that runs your build tools on your machine. Your finished React application runs in the browser, not in Node, unless you are doing server-side rendering. The word also has a second meaning, a node in the DOM tree, and it is worth clarifying which one an interviewer means.

The tools used with React typically include a bundler, a compiler, a linter, and a test runner. Modern setups bundle these behind a single build tool.

7. Web fundamentals that come up alongside React

Frontend interviews mix React questions with plain web questions.

  in HTML is a non-breaking space. It renders as a space that will not collapse with neighboring whitespace and will not break across lines, which is why it appears in layout-sensitive markup.

Adding data to a JSON file in JavaScript is a common practical question, and the answer differs depending on whether you are in the browser or in Node.

How to practice

Reading about React is not the same as being able to build with it under time pressure. Both parts of a frontend loop need practice: the React questions above, and the algorithmic round that usually accompanies them.

For the coding round, JavaScript coding challenges with solutions is a good starting point, and there is a separate list of challenges suited to beginners. If the role is full stack, Node.js interview questions and questions aimed at experienced Node developers cover the server side.

For the algorithmic round itself, Grokking the Coding Interview teaches the recurring problem patterns, which is what carries over to a question you have not seen before.

Frequently asked questions

Is React a framework or a library?

A library. It handles the view layer. Routing, data fetching, and state management beyond component state come from other packages.

Do I need to know class components?

Yes, enough to read them. New code uses function components and hooks, but existing codebases still contain class components, and interviewers ask about setState and lifecycle methods.

What is the most common React interview question?

Explaining what happens when state changes: the re-render, the diff against the previous tree, and the minimal update to the page.

How much JavaScript do I need before learning React?

Solid comfort with functions, array methods, destructuring, modules, and promises. Most React confusion turns out to be JavaScript confusion.

Related reading

• Beginner's Guide to Object-Oriented Programming
• Mastering the 20 Coding Patterns for Interviews
• 25+ API Interview Questions and Expert Answers