What is React and its main features? | Interview Question

Q: What is React and its main features?

**Target Audience:** Anyone preparing for a React interview — assumes no prior React knowledge. **Difficulty:** Easy > **How to read this doc:** Every concept is explained in plain language first. Right after, you will see a callout like 📌 Interview term: — the exact vocabulary an interviewer expects. The object-shape claims below were produced by running React 19.2.8 in this repo. ## 1. Why This Even Matters — A Story First Imagine decorating a room by giving instructions over the phone. The **imperative** way: "walk to the north wall, take down the blue picture, put up the red one, move the lamp two feet left." You have to know the current state of the room and describe every individual movement. Get one step wrong and everything after it is wrong too. The **declarative** way: "here is a photo of how the room should look." Someone else compares it to how the room looks now and works out the moves. That second approach is React. You never write "find this node and c

The problem

Question presented to candidate: "Start me off simply — what is React, and what are the main features that define it?"

What a strong answer should cover:

React is a library for building user interfaces, not a full framework — it deliberately leaves routing, data fetching, and build tooling to others.
Declarative: you describe what the UI should look like for a given state; React works out the DOM operations.
Component-based: the UI is composed from independent, reusable pieces that own their own state.
The Virtual DOM and reconciliation: React diffs a cheap in-memory description against the previous one and applies the minimum real DOM changes.
Unidirectional data flow: data travels down through props, which makes state changes traceable.
Learn once, write anywhere: the same component model targets DOM, native, and other renderers.
Bonus signal: an "element" is just a plain, frozen JavaScript object — the declarative description React works from.

Clarifying questions expected:

"Do you want the pitch, or the mechanism underneath it?"
"Should I cover the modern additions — Server Components and the compiler — or stick to fundamentals?"

Code / implementation expected: Optional. A tiny component showing declarative state-to-UI mapping is plenty.

react basics
library
declarative
virtual dom

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for a React interview — assumes no prior React knowledge. Difficulty: Easy

How to read this doc: Every concept is explained in plain language first. Right after, you will see a callout like 📌 Interview term: — the exact vocabulary an interviewer expects. The object-shape claims below were produced by running React 19.2.8 in this repo.

1. Why This Even Matters — A Story First

Imagine decorating a room by giving instructions over the phone. The imperative way: "walk to the north wall, take down the blue picture, put up the red one, move the lamp two feet left." You have to know the current state of the room and describe every individual movement. Get one step wrong and everything after it is wrong too.

The declarative way: "here is a photo of how the room should look." Someone else compares it to how the room looks now and wor

The solution is hidden so you can try first

6 min read · 8 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactThe same UI declaratively — state in, UI out

Open in playground

import { useState } from "react";

// Declarative: this function says what the UI IS for a given state.
// It never says "find the counter node and change its text".
function Counter({ label }) {
  const [count, setCount] = useState(0);
  const status = count === 0 ? "untouched" : count > 5 ? "getting high" : "counting";

  return (
    <div style={{ border: "1px solid #ccc", borderRadius: 8, padding: 16, marginBottom: 12 }}>
      <strong>{label}</strong>
      <p style={{ margin: "8px 0" }}>
        Count: {count} — <em>{status}</em>
      </p>
      {/* Conditional UI is just an expression, not a DOM mutation */}
      {count > 5 && <p style={{ color: "crimson" }}>Above five!</p>}
      <button onClick={() => setCount((c) => c + 1)}>+1</button>{" "}
      <button onClick={() => setCount(0)}>reset</button>
    </div>
  );
}

export default function App() {
  // Component-based: the same component reused, each with its own state.
  const labels = ["First counter", "Second counter"];

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      {labels.map((l) => (
        <Counter key={l} label={l} />
      ))}
      <p style={{ color: "#666", fontSize: 13 }}>
        Each counter owns its own state. Nothing here queries or mutates the DOM —
        the UI is a pure function of state, and React applies the differences.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.