Types of components?

Components can be either functional components (using functions) or class components (using ES6 classes). Functional components are simpler and recommended for most use cases, while class components have additional features like state and lifecycle methods.

Other categories of components to look for:

1
Class and Function components
2
Controlled and Uncontrolled components
3
Pure components
4
Smart and Dumb components
5
Stateless and Stateful components

Difficulty: 5/10

Topics: functional vs class components, presentational vs container, higher-order components

Scenario Questions

0-2 years experience

1
How would you decide whether to implement a simple toggle button as a function component or a class component?
2
If you create a presentational component that only renders UI, what props would you pass to keep it reusable across different pages?
3
What happens if you try to use state inside a functional component without using hooks?

2-5 years experience

1
We have a dashboard with a data‑fetching container component and several UI widgets. How would you structure the components, and why might you choose container vs presentational patterns?
2
During a code review a teammate converted a class component to a functional one but forgot to memoize a heavy child component, causing a slowdown. How would you diagnose and fix the regression?
3
You need to add a higher‑order component to inject authentication info into several pages. What trade‑offs should you consider compared to using React context?

5-8 years experience

1
Our app renders a large list with infinite scroll. Discuss the component architecture—pure components, memo, virtualization—you would use to keep rendering performant at scale.
2
We are migrating a legacy codebase that heavily uses class components and lifecycle methods to modern hooks. What migration strategy would you adopt to minimize risk and maintainability?
3
Design a reusable modal component that works across multiple teams, handling focus management, portal rendering, and theming while avoiding prop‑drilling.

8+ years experience

1
At a company‑wide level we want to standardize component types (functional, class, HOC, render props) across dozens of repositories. How would you set up guidelines, tooling, and migration paths to enforce consistency without slowing feature velocity?
2
Discuss the long‑term architectural implications of favoring higher‑order components versus hooks for cross‑cutting concerns in a large micro‑frontend ecosystem.
3
If you need to support both legacy browsers that don’t understand hooks and modern browsers, how would you structure your component library to serve both without duplicating code?

Follow-up Questions

❓What concrete steps would you take to implement that approach?
❓What edge cases or pitfalls might you run into?
❓How would you verify that your solution works as intended?