ReactInterview PrepFrontendJavaScript

100 React Interview Questions & Answers

August 10, 202650 min read

This is the companion reference to "React Interview Questions, Actually Explained" — that one goes deep on 36 questions with diagrams and a mock test; this one is the full map. 100 questions, organized the way they'd realistically come up across a set of interviews, each answered concisely and accurately rather than at essay length. Where a question overlaps with the deep-dive, I've kept the answer here short and pointed at the fuller version rather than repeating it.

0 / 100 blocks read

React basics

Q1. What is React?

A JavaScript library (not a full framework) for building user interfaces out of reusable, composable components. It was built at Facebook/Meta and popularized describing UI declaratively — you describe what the UI should look like for a given state, and React updates the real DOM to match via its virtual DOM and diffing process.

Q2. How is React different from Angular or Vue?

When comparing React, Angular, and Vue, a few consistent differentiators stand out.

Aspect	React	Angular	Vue
Core philosophy	A focused UI library — routing, state management, etc. come from separate libraries you choose.	A comprehensive, "batteries-included" framework.	A balance — solid core libraries with room to add third-party tools.
Learning curve	Simple to start; complexity grows as you add libraries.	Steeper — modules, services, and its own dependency-injection system.	Generally the gentlest, with concise, well-organized docs.
Community & ecosystem	The largest ecosystem; huge choice of third-party libraries.	A comprehensive, centrally-managed ecosystem with strong enterprise support.	Smaller but growing fast, with a dedicated core team.
Performance	Efficient rendering plus built-in optimization tools (memo, etc.).	AOT compilation and Zone.js avoid unnecessary change-detection cycles.	Small bundle size and features like lazy-loaded components.
State management	Local component state, plus Context or libraries like Redux/MobX.	Services + RxJS for structured, reactive state.	Vuex/Pinia, purpose-built for Vue.
Language	JavaScript, with JSX; TypeScript via tooling.	Built around TypeScript first.	Supports both JavaScript and TypeScript.
Templating	JSX — HTML-like syntax inside JavaScript.	Strict separation: TS, HTML, and CSS in separate files.	Single-file components (template + script + style), or separate files.
Tooling / IDE support	Great for TS/Flow; JSX tooling has matured a lot.	Full first-party TypeScript language service.	Strong IDE support — type-checking, debugging, autocompletion.

Q3. What is a React component?

A self-contained, reusable piece of UI — in modern React, almost always a JavaScript function that accepts props and returns JSX describing what should render. Components compose: a page is just a tree of smaller components, each responsible for one part of the UI.

Q4. How do you create a component in React?

jsx

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Used like a regular tag:
<Greeting name="Ada" />;

Q5. What is JSX and why do we use it in React?

JSX is syntax sugar that compiles to React.createElement()/jsx() calls — see the "JSX vs. React.createElement" question in the deep-dive companion for the fully compiled example. It's used because writing markup and logic in one place, with real JavaScript expressions inline via {}, is far more ergonomic than a template string or a separate templating language.

Q6. Can you explain the virtual DOM in React?

A lightweight, in-memory representation of the UI as plain JS objects. React diffs a new virtual tree against the previous one and applies only the resulting minimal set of real DOM changes — see the deep-dive's Virtual DOM question for the full walkthrough with a diagram.

Q7. What are the differences between a class component and a functional component?

Class components extend React.Component, hold state in this.state, and use lifecycle methods (componentDidMount, etc.); function components use hooks (useState, useEffect) for the same jobs, with less boilerplate and no this-binding to manage. Function + hooks is the default for new code today — the deep-dive's function-vs-class table covers the full comparison.

Q8. How do you handle events in React?

React wraps native events in a SyntheticEvent and handlers are passed as camelCase props (onClick, onChange) rather than string HTML attributes.

jsx

function Button() {
  return <button onClick={() => alert("Clicked!")}>Click me</button>;
}

Q9. What are state and props in React?

Props are read-only data a parent passes down to configure a component; state is data a component owns and manages itself, and changing it triggers a re-render. See the deep-dive's props-vs-state question for the full distinction and the classic "copying a prop into state" pitfall.

Q10. How do you pass data between components in React?

Parent → child is just a prop. Child → parent is a callback function passed down as a prop, which the child calls with the data. Sibling → sibling (no direct relationship) usually means lifting the shared state up to their common parent, or reaching for Context/a state library once that gets unwieldy.

Page110

Enjoyed this?

Let's talk about building something together.

Get in touch