React Interview Questions

Understand the anatomy of a React function component, how JSX compiles, and the rules that make a valid component.

Understand the key differences between functional and class components, why hooks changed everything, and why functional components are now the standard.

Understand the difference between props and state in React, when to use each, and how they interact to drive rendering.

Understand what JSX compiles to, why it exists, and the rules that govern how you write it correctly.

Understand React as a UI library, how its declarative model and virtual DOM work, and why it became the dominant choice for frontend development.

Pass callback functions from parent to child as props to enable child-to-parent communication in React.

Set fallback values for optional props using destructuring defaults in functional components and understand when to use defaultProps.

Use a controlled radio group with useState to capture the selected value and reflect it in another element.

Use controlled inputs with useState to mirror user-typed text into another element in real time.

Understand React synthetic events, event delegation, common patterns for handlers, and how to prevent default behavior and stop propagation.

Pass any JavaScript value from parent to child as props, understand how props flow in React, and know what children can and cannot do with them.

Apply conditional CSS in React using className with ternary, the cn() utility, and inline styles. Know which approach to use and when.

Render elements conditionally in React using if/else, ternary operators, logical AND, and null returns. Know the gotchas for each approach.

Conditional rendering in React is JavaScript control flow applied to JSX. Learn the four patterns, when to use each, and the gotchas that catch candidates off guard.

Use dangerouslySetInnerHTML to render HTML strings from a CMS or API, and always sanitize external content with DOMPurify to prevent XSS.

The key prop lets React match list elements across renders for efficient diffing. Using index as key is a common bug. Understand why and how to fix it.

Use map() to transform arrays into JSX elements. Know when to use filter() and flatMap(), and how to handle nested arrays and empty states.

Toggle element visibility in React by combining useState with conditional rendering or CSS. Know when to unmount vs keep mounted.

Render a controlled select dropdown from an array of strings or objects using map(). Know how to track the selected value and handle the placeholder option.

Track a select value in state and display it anywhere on the page. This is the controlled component pattern applied to dropdowns and is the foundation for summary panels and confirmation UIs.