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.

Question 9

What is JSX?

Accepted Answer

Syntactic sugar that compiles to React.createElement / jsx() calls describing the element tree. JSX is not HTML—attribute names differ (className), and expressions wrap in {}. Must return a single root or fragment.

Question 10

Why use className instead of class in JSX?

Accepted Answer

class is a reserved word in JS; DOM property is className. Similarly htmlFor instead of for. React normalizes these to DOM attributes.

Question 11

How do you conditionally render in JSX?

Accepted Answer

&&, ternary, or early return null; avoid leaving 0/NaN accidentally rendered. Prefer clear ternaries for if/else UI. Extract variables for readability. Don't put hooks inside conditions.

Question 12

What are the rules for the key prop in lists?

Accepted Answer

Keys should be stable unique IDs among siblings—not random, preferably not index if list reorders. Keys help reconciliation. Wrong keys remount components and reset state.

Question 13

What does spreading props {...props} risk?

Accepted Answer

Forwarding unexpected DOM attrs, overriding important props, or leaking sensitive data. Be explicit. Destructure known props and pass the rest carefully to DOM elements.

Question 14

JSX vs React.createElement — when does it matter?

Accepted Answer

Same runtime result; JSX needs a transform. Understanding createElement helps debug compiled output. In modern React 17+ automatic runtime, import React for JSX is often unnecessary.

Question 15

What are props in React?

Accepted Answer

Inputs passed from parent to child; read-only from the child's perspective. Props enable composition and reuse. Changing props triggers re-render (subject to memo). Don't mutate props.

React Interview Questions & Answers

React interview topics

All React interview questions

Components interview questions

JSX interview questions

Props interview questions

State interview questions

Hooks interview questions

useEffect interview questions

useMemo interview questions

useCallback interview questions

Context interview questions

Rendering interview questions

Reconciliation interview questions

Performance interview questions

State Management interview questions

Server Components interview questions

Architecture interview questions

Testing interview questions