What are Components in React?
Learn what React components are, how function components, props and state work, how they compose into a UI, plus code examples and common interview questions.
Expected Interview Answer
Components are the independent, reusable building blocks of a React UI — self-contained functions (or classes) that accept inputs called props and return JSX describing a part of the interface.
A React app is a tree of components composed together, from a top-level App down to small buttons and inputs. Modern React favors function components that receive props and use Hooks like useState for local state. Components let you split the UI into isolated pieces you can develop, test, and reuse independently, and they re-render whenever their props or state change.
- Reusable across the app and between projects
- Encapsulate their own markup, logic, and state
- Easier to test and reason about in isolation
- Composable into complex UIs from simple parts
- Clear one-way data flow through props
AI Mentor Explanation
Components are like the specialist roles in a cricket XI — opener, spinner, wicketkeeper — each self-contained with its own job, yet combined into one team. You can swap a bowler in or reuse the same role across matches, just as React components encapsulate their own behavior and compose into a full app.
Step-by-Step Explanation
Step 1
Define a component
Write a function that returns JSX, e.g. function Button() { return <button>Click</button>; }.
Step 2
Accept props
Declare parameters so callers can configure the component, like function Button({ label }) { ... }.
Step 3
Add local state
Use Hooks such as useState when the component needs to remember changing data across renders.
Step 4
Compose components
Nest components inside others' JSX to build a tree from small reusable pieces.
Step 5
Render and update
React renders the tree, then re-renders any component whose props or state change.
What Interviewer Expects
- Definition of a component as a reusable UI building block
- Difference between function and class components
- Understanding of props as inputs and one-way data flow
- Awareness that components can hold local state via Hooks
- How components compose into a tree to form the app
Common Mistakes
- Forgetting to capitalize custom component names in JSX
- Mutating props instead of treating them as read-only
- Putting all logic in one giant component instead of splitting it
- Confusing props (inputs) with state (internal, changeable data)
Best Answer (HR Friendly)
“Components are the reusable building blocks of a React app — small, self-contained pieces of the interface like a button, a header, or a form. Developers build the whole application by combining these pieces, which makes the code easier to reuse and maintain.”
Code Example
import { useState } from 'react';
function Counter({ label }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{label}: {count}
</button>
);
}
function App() {
return (
<div>
<Counter label="Apples" />
<Counter label="Oranges" />
</div>
);
}Follow-up Questions
- What is the difference between function and class components?
- What are props and how do they differ from state?
- Why must component names start with a capital letter?
- What makes a component re-render?
- How do you share logic between components?
MCQ Practice
1. A React component is best described as?
Components are independent, reusable pieces of UI that return JSX describing part of the interface.
2. Props in a component are?
Props are inputs passed down from a parent component and should be treated as read-only.
3. Custom component names in JSX must?
React treats lowercase tags as DOM elements, so custom components must start with a capital letter.
Flash Cards
What is a component? — A reusable, self-contained building block of a React UI that returns JSX.
Props vs state? — Props are read-only inputs from a parent; state is internal data a component manages and can change.
Function vs class component? — Both return UI; function components use Hooks for state/effects and are the modern default.
Why capitalize component names? — React reads lowercase JSX tags as DOM elements and capitalized ones as components.