React Component Composition and Props Questions

Covers designing and building reusable, composable React components using props to pass data and callbacks. Includes understanding prop drilling and strategies to avoid it, controlled versus uncontrolled components, prop validation and type checking, the children prop, render prop and higher order component patterns, and when to split or combine components for clarity and reuse. Emphasizes component hierarchy design, interface stability, handling default and optional props, passing event handlers, and when to use context or other patterns instead of deep prop passing.

MediumTechnical

46 practiced

Write a unit test (Jest + React Testing Library) for a `Counter` component that receives an `initial` prop and an `onChange` callback. The test should verify that clicking the increment button increases the displayed value and calls `onChange` with the new value.

MediumTechnical

52 practiced

Using TypeScript, define prop types for a `Button` component that can either be a navigation link (`href` present) or a clickable button (`onClick` present), but not both. Use discriminated unions to model this API and show example usage for each variant.

HardTechnical

43 practiced

Design an advanced `Select` component API that supports: controlled `value` or `defaultValue`, keyboard accessibility, ref forwarding, option grouping, and a custom `renderOption` prop. Explain how you would manage controlled vs uncontrolled internal state and how to expose consistent callbacks to consumers.

EasyTechnical

52 practiced

Show how a parent component should pass an event handler to a child button component and explain best practices to avoid unnecessary re-renders (e.g., binding in render). Provide a small code example in React functional components illustrating a parent `onToggle` passed to `<ToggleButton onToggle={...} />`.

EasyTechnical

42 practiced

Describe the children prop in React. When should a component accept and render `props.children` versus exposing a render prop or explicit slot props? Provide a concise example of a `Card` component that uses `children` and how a consumer would use it.

Unlock Full Question Bank

Get access to hundreds of React Component Composition and Props interview questions and detailed answers.

Join thousands of developers preparing for their dream job.