What are React Components? | Interview Question

Q: What are React Components?

**Target Audience:** Anyone preparing for a React interview — assumes JavaScript functions, no React required. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The instance and prototype claims in section 4 were produced by inspecting real components on React 19.2.8. ## 1. Why This Even Matters — A Story First Think about LEGO. A brick is small, does one thing, and — crucially — has a standard connector. You do not build a castle by carving one enormous block; you build it from bricks that snap together, and you can swap a red brick for a blue one without disturbing anything around it. A component is that brick. The connector is **props**. A UI is assembled from components the way a castle is assembled from bricks, and the reason both work is that the pieces do not need to know what they are part of. ## 2. The Core Idea 📌 **Interview term: Component** — a reusable, self-contained pi

The problem

Question presented to candidate: "What is a component in React, and what makes something a good one?"

What a strong answer should cover:

A component is a reusable, self-contained piece of UI: a function that takes props and returns a description of what to render.
Naming rule: must start with a capital letter, because lowercase JSX names compile to host-element strings.
Function components are the modern default; class components are legacy but still supported and still required for Error Boundaries.
Function components have no instance — there is no this; state lives in Hooks keyed by call order.
Props are read-only. A component must never mutate them.
Purity: given the same props and state, a component should return the same output and cause no side effects during render.
Reuse is by composition, not inheritance — React has no component inheritance story at all.
Components can return arrays, strings, numbers, null, and Fragments — not just a single element.

Clarifying questions expected:

"Function or class — is this a legacy codebase?"
"Do you want the definition, or how I decide where to draw component boundaries?"

Code / implementation expected: Yes — a small component taking props, plus one composing another.

components
reusability
ui
functional components

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 JavaScript functions, no React required. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The instance and prototype claims in section 4 were produced by inspecting real components on React 19.2.8.

1. Why This Even Matters — A Story First

Think about LEGO. A brick is small, does one thing, and — crucially — has a standard connector. You do not build a castle by carving one enormous block; you build it from bricks that snap together, and you can swap a red brick for a blue one without disturbing anything around it.

A component is that brick. The connector is props. A UI is assembled from components the way a castle is assembled from bricks, and the reason both work is that the pieces do not need to know what they are part of.

The solution is hidden so you can try first

6 min read · 9 sections

Try it in the playground

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

ReactProps in, callbacks up, and composition via children

Open in playground

import { useState } from "react";

// A presentational component: props in, UI out, no state of its own.
// It knows nothing about where it is used — that is what makes it reusable.
function Avatar({ name, size = 40 }) {
  const initials = name.split(" ").map((w) => w[0]).join("").toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%", background: "#4f46e5",
      color: "white", display: "grid", placeItems: "center", fontSize: size / 2.5,
    }}>
      {initials}
    </div>
  );
}

// A component taking a CALLBACK — the only way data travels back up.
// Note it never mutates props; it calls what the parent handed it.
function UserRow({ user, onSelect }) {
  return (
    <li style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 0" }}>
      <Avatar name={user.name} size={32} />
      <span style={{ flex: 1 }}>{user.name}</span>
      <button onClick={() => onSelect(user.id)}>select</button>
    </li>
  );
}

// A component composing arbitrary content through the children prop — the
// generic slot that makes wrappers reusable without knowing what goes inside.
function Card({ title, children }) {
  return (
    <section style={{ border: "1px solid #ddd", borderRadius: 10, padding: 16, marginBottom: 14 }}>
      <h4 style={{ margin: "0 0 10px" }}>{title}</h4>
      {children}
    </section>
  );
}

const USERS = [
  { id: 1, name: "Ada Lovelace" },
  { id: 2, name: "Grace Hopper" },
  { id: 3, name: "Alan Turing" },
];

export default function App() {
  const [selected, setSelected] = useState(null);
  const chosen = USERS.find((u) => u.id === selected);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", maxWidth: 420 }}>
      <Card title="Team">
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          {USERS.map((u) => (
            <UserRow key={u.id} user={u} onSelect={setSelected} />
          ))}
        </ul>
      </Card>

      {/* The same Card wrapper, completely different children */}
      <Card title="Selection">
        {chosen ? (
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Avatar name={chosen.name} size={48} />
            <strong>{chosen.name}</strong>
          </div>
        ) : (
          <em style={{ color: "#666" }}>Nothing selected yet.</em>
        )}
      </Card>
    </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.