Questions
1 of 14
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
What is a component?
Difficulty: 4/10
functional vs class components, props and state, lifecycle / hooks
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.
Scenario Questions
0-2 years experience
- 1You need to display a user’s name and avatar in a header. How would you create a React component for that?
- 2If you forget to return JSX from a functional component, what will happen at runtime?
2-5 years experience
- 1While 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?
- 2You 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
- 1A page with dozens of identical card components is sluggish on scroll. What strategies would you use at the component level to improve performance?
- 2How would you design a reusable form input component that works across multiple forms while keeping validation logic flexible?
8+ years experience
- 1Our legacy codebase mixes class and functional components. How would you plan a migration strategy that minimizes risk and maintains feature parity?
- 2When 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?