What is a component?

A component is a self-contained, reusable piece of code that represents a part of the user interface (UI). A component's job is to take in inputs (called props) and return a description of what should appear on the screen (usually via JSX). This modular approach allows you to build complex applications by combining many small, simple components.

1
A component lets you break up the user interface into separate pieces that can be reused and handled independently.
2
A React component takes an optional input and returns a React element that is rendered on the screen.
3
A Component is a class or function that describes part of a React UI.

Difficulty: 4/10

Topics: functional vs class components, props and state, lifecycle / hooks

Scenario Questions

0-2 years experience

1
You need to display a user’s name and avatar in a header. How would you create a React component for that?
2
If you forget to return JSX from a functional component, what will happen at runtime?

2-5 years experience

1
While building a product list, the list stops updating when a new item is added. How would you debug the component responsible for rendering the list?
2
You have a component that fetches data in componentDidMount. How would you refactor it using hooks, and what edge cases must you handle?

5-8 years experience

1
A page with dozens of identical card components is sluggish on scroll. What strategies would you use at the component level to improve performance?
2
How would you design a reusable form input component that works across multiple forms while keeping validation logic flexible?

8+ years experience

1
Our legacy codebase mixes class and functional components. How would you plan a migration strategy that minimizes risk and maintains feature parity?
2
When multiple teams need to share a UI component library, what architectural decisions do you make to ensure versioning, theming, and backward compatibility?

Follow-up Questions

❓How would you decide between a functional and a class component in a new feature?
❓What are the trade‑offs of keeping state inside a component versus lifting it up?
❓Can you describe a situation where a component’s render caused a performance problem?