What are Components in React?
Learn what React components are, how function components work with props and JSX, and why they are the reusable building blocks of every React app.
Expected Interview Answer
A React component is a reusable, self-contained function that accepts props and returns JSX describing what should appear on screen, letting you build a UI as a tree of independent, composable pieces.
Modern React uses function components almost exclusively — plain JavaScript functions that return JSX and can hold internal state via hooks like useState. Components can be nested, reused with different props, and composed into larger components, mirroring how HTML elements nest but with your own naming and logic. Each component re-renders independently when its props or state change, and React reconciles the returned JSX against the previous render to update only what changed in the DOM. This model turns UI development into building and combining small, testable functions rather than manipulating the DOM directly.
- Reusable UI building blocks
- Encapsulate markup, logic, and style together
- Composable — nest and combine freely
- Easier to test and reason about in isolation
- Enable a declarative, predictable render model
AI Mentor Explanation
A React component is like a specialist fielding position — say, a slip fielder — with one clear job that plugs into the larger team formation. The captain (parent component) hands each fielder specific instructions (props) for where to stand, and the fielder reacts independently to the ball without needing to know the whole game plan.
Step-by-Step Explanation
Step 1
Define the function
Write a JavaScript function whose name starts with a capital letter so React treats it as a component.
Step 2
Accept props
The function receives a single props object as its argument, holding any data passed from its parent.
Step 3
Return JSX
The function returns JSX describing the markup and child elements to render for that state.
Step 4
Compose components
Use the component like an HTML tag inside another component's JSX, nesting to build larger UIs.
Step 5
Add local state if needed
Call useState or other hooks inside the function body to give the component its own memory.
Step 6
Let React render and update
React calls the function on each render and reconciles the returned JSX with the DOM efficiently.
What Interviewer Expects
- Describes components as functions returning JSX
- Understands props flow data into a component
- Knows components can be composed and nested
- Mentions hooks for state within function components
- Explains reusability as a core benefit
Common Mistakes
- Describing only class components as if they are the norm
- Confusing props with state
- Forgetting component names must be capitalized
- Thinking a component must return a single DOM element without fragments
- Not mentioning that components re-render on prop/state change
Best Answer (HR Friendly)
“A React component is a reusable building block of a web page, like a button or a card, that you can define once and use in many places with different content. This makes it faster to build and maintain large websites because teams reuse the same well-tested pieces instead of rewriting code.”
Code Example
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
function App() {
return (
<div>
<Greeting name="Asha" />
<Greeting name="Diego" />
</div>
);
}
export default App;Follow-up Questions
- What is the difference between a function component and a class component?
- How do props differ from state in a component?
- Can a component return multiple elements without a wrapper div?
- What naming rule must every component follow?
- How does React decide when to re-render a component?
MCQ Practice
1. What must a React component's name start with?
React distinguishes components from regular HTML tags by requiring their names to start with a capital letter.
2. What does a function component return?
Function components return JSX, which React converts into actual DOM elements during rendering.
3. How does a parent pass data into a child component?
Props are the mechanism by which a parent component passes data down into a child component.
Flash Cards
What is a React component? — A reusable function that accepts props and returns JSX describing part of the UI.
What naming rule applies to components? — Component names must start with a capital letter to distinguish them from HTML tags.
How do components gain memory across renders? — By using hooks like useState inside the function body.
Why are components considered composable? — Because you can nest one component inside another's JSX like custom HTML tags.