Question 1

What is a React component?

Accepted Answer

A function (or class) that returns React elements describing UI for given props/state. Function components are the modern standard. They should be pure with respect to props/state during render. Side effects belong in effects or event handlers.

Question 2

Function vs class components today?

Accepted Answer

Prefer functions + hooks; classes are legacy for most new code. Hooks cover state, lifecycle, and context. Class knowledge still helps reading older codebases.

Question 3

What does it mean for a render to be pure?

Accepted Answer

Same props/state → same output; no side effects during render. Don't fetch, mutate external variables, or call random APIs while rendering. Impure renders cause subtle bugs and break concurrent features.

Question 4

Controlled vs uncontrolled components?

Accepted Answer

Controlled: form values driven by React state; uncontrolled: DOM holds state via refs. Controlled enables validation and instant UI reactions. Uncontrolled can be simpler for basic forms or non-React integrations.

Question 5

When should you split a component?

Accepted Answer

When it mixes concerns, is hard to test, or causes avoidable re-renders of large subtrees. Extract presentational pieces and custom hooks. Avoid premature micro-components that hurt readability.

Question 6

What are fragments and why use them?

Accepted Answer

<>... groups children without an extra DOM node. Useful when a component must return multiple siblings. Keys still needed on lists of fragments when mapping.

Question 7

How do error boundaries work?

Accepted Answer

Class components implementing getDerivedStateFromError/componentDidCatch catch render errors in subtrees. They don't catch event handler or async errors. Use for resilient section fallbacks. Libraries exist for function-style wrappers.

Question 8

Design a reusable Modal component API.

Accepted Answer

Compose with portal, focus trap, labelledby, onClose; avoid baking business logic into the shell. Support controlled open state. Ensure a11y (Escape, focus restore). Keep styling flexible via slots/children.

Components React Interview Questions

Other React interview topics