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

01

Understand 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 basicslibrarydeclarativevirtual dom

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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. Th

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

The same UI declaratively — state in, UI out

Run 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>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.