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

01

Understand 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.

componentsreusabilityuifunctional components

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 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

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

Props in, callbacks up, and composition via children

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

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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