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.

HardTechnical

44 practiced

You introduced a subtle bug: a child memoized component stopped updating when its parent updated a nested object prop because the parent mutated the object instead of creating a new one. Explain how to detect this bug, why immutability matters for shallow comparisons, and give two concrete fixes at the parent and child level.

Sample Answer

**Detecting the bug**- Reproduce steps: update the nested field in parent and observe child not re-rendering.- Tools: React DevTools → inspect props and highlight updates; add console.log in child render; use Profiler to see skipped renders.- Quick check: log `prevProps` vs `nextProps` in a custom comparator to confirm shallow-equal reference holds.

**Why immutability matters for shallow comparisons**- React.memo (and PureComponent) use shallow equality: they compare object references, not deep contents. If you mutate an object in-place, its reference stays the same so the shallow check returns "equal" and React skips re-render even though nested data changed. Immutable updates produce new references, so shallow compare detects change.

**Two concrete fixes**

1) Parent-level fix — produce a new object (recommended)

jsx

// create new nested object instead of mutating
setParentState(prev => ({
  ...prev,
  nested: { ...prev.nested, field: newValue } // new object reference
}));

Why: ensures new references propagate, letting memoized child re-render.

2) Child-level fix — change comparator or avoid memo- Use a custom comparator that inspects nested fields (or use deep equality):

jsx

import isEqual from 'lodash/isEqual';
export default React.memo(MyChild, (prev, next) => isEqual(prev.data, next.data));

- Or remove React.memo for that prop, or accept primitive/flattened props.

Trade-offs: deep equality is more CPU-heavy; prefer immutable updates in parent for best performance and predictability.

HardTechnical

61 practiced

Design the TypeScript types for a `Button` component that accepts all native HTML button attributes plus a custom `variant` prop without conflicting with native `type` or `onClick` types. Show how to use `Omit` or `ComponentPropsWithoutRef` to achieve this safely.

Sample Answer

**Approach — goal**Accept all native <button> props while adding a custom `variant` and avoiding accidental type conflicts for `type`/`onClick`. Use React’s ComponentPropsWithoutRef<'button'> and Omit to remove any keys you want to re-declare safely, then compose.

**Type + component example**

typescript

import React from "react";

// Base native button props
type NativeButtonProps = React.ComponentPropsWithoutRef<'button'>;

// Omit keys we want to control (optional)
type Controlled = 'type' | 'onClick';

// Compose final props: keep native props, re-declare controlled keys, add variant
export type ButtonProps = Omit<NativeButtonProps, Controlled> & {
  // re-declare with exact signature you expect (safe and explicit)
  type?: 'button' | 'submit' | 'reset';
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  variant?: 'primary' | 'secondary' | 'ghost';
};

// Implementation with forwardRef to preserve ref typing
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', className, ...rest }, ref) => {
    const classes = `btn btn-${variant} ${className ?? ''}`;
    return <button ref={ref} className={classes} {...rest} />;
  }
);
Button.displayName = 'Button';

**Why this works**- ComponentPropsWithoutRef<'button'> pulls official DOM typings (aria, disabled, form, etc.).- Omit removes keys you want to explicitly control so you won’t accidentally widen or conflict types.- Re-declaring `type` and `onClick` ensures predictable signatures across your codebase.

EasyTechnical

54 practiced

What is 'prop drilling'? Provide a short example where a value must be passed through three levels of components. Name two common strategies to avoid prop drilling and briefly describe when each is appropriate (Context API, render props, lifting state, or global stores).

Sample Answer

**Definition — What is prop drilling?** Prop drilling is passing props through intermediate components that don't need them, just so a deep child can access the value. It makes components harder to maintain and couples unrelated layers.

**Short example (value passed through three levels):**

javascript

// Parent -> Mid1 -> Mid2 -> Leaf (value flows down)
function Parent() {
  const theme = "dark";
  return <Mid1 theme={theme} />;
}
function Mid1({ theme }) { return <Mid2 theme={theme} />; }
function Mid2({ theme }) { return <Leaf theme={theme} />; }
function Leaf({ theme }) { return <div>Theme: {theme}</div>; }

**Two common strategies to avoid prop drilling**- Context API - When to use: for app-wide or section-scoped values (theme, auth, locale). Creates a provider so deep children consume without intermediate props. Good for moderate complexity and built-in to React.- Global stores (Redux, Zustand, MobX) - When to use: for complex state, many independent consumers, or when you need advanced patterns (time-travel, middleware, persistent state). Better for large apps with predictable state management needs.

(Also consider render props or lifting state depending on scope: lift state to nearest common ancestor if only a couple of siblings need it.)

MediumTechnical

76 practiced

Explain `React.cloneElement`: what it does, typical use-cases (e.g., injecting props into children), and pitfalls (e.g., breaking children identity, performance). Show a short example where a `Toolbar` clones its immediate children to add an `onClick` handler.

Sample Answer

**What React.cloneElement does**React.cloneElement(element, props, ...children) returns a new React element based on an existing one, merging new props (shallowly) and replacing children if provided. It preserves the element type and key unless you override them.

**Typical use-cases**- Inject props (callbacks, styles, context-like values) into immediate children- Enhance third‑party child components without changing their source- Implement simple HOC-like behavior for specific child nodes (e.g., toolbar buttons)

**Pitfalls**- Breaks referential identity: cloned elements are new objects, so strict equality checks fail.- Can interfere with keys and reconciliation if you change key/type.- Performance: cloning many deep trees each render can be costly.- Over-injecting props may violate child encapsulation or prop expectations.- Accessibility: ensure injected handlers don’t break keyboard support.

**Example: Toolbar cloning immediate children to add onClick**

jsx

import React from "react";

function Toolbar({ children, onItemClick }) {
  return (
    <div role="toolbar">
      {React.Children.map(children, (child, idx) =>
        React.isValidElement(child)
          ? React.cloneElement(child, {
              onClick: (e) => {
                child.props.onClick?.(e);
                onItemClick?.(idx, e);
              },
              "data-toolbar-index": idx
            })
          : child
      )}
    </div>
  );
}

// Usage
function App() {
  return (
    <Toolbar onItemClick={(i) => console.log("clicked", i)}>
      <button>One</button>
      <button>Two</button>
    </Toolbar>
  );
}

Tips: prefer composition or context when you need deep/scale-wide injection; clone only immediate children and keep injected props minimal and well-documented.

HardTechnical

49 practiced

Outline a safe, incremental strategy to migrate a large JavaScript codebase of React components to TypeScript focusing on component props. Include steps for typing props gradually, adding `allowJs`/`checkJs` options, using `@ts-ignore` sparingly, introducing `any` as a stepping stone, and automating changes with codemods.

Sample Answer

**Goal & approach (incremental, safe)**Migrate props typing gradually so CI stays green and runtime behavior unchanged. Use opt-in TypeScript checks, introduce minimal `any`, and automate repetitive edits with codemods.

**Steps**1. Prep: add TypeScript + React types, create tsconfig with allowJs/checkJs enabled.

json

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "jsx": "react-jsx",
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

2. File-by-file opt-in: rename low-risk components to .tsx and add explicit props interfaces:- Start with leaf presentational components.- Example:

tsx

type ButtonProps = { label: string; onClick?: () => void };
function Button({ label, onClick }: ButtonProps) { ... }

3. Progressive checks: flip `checkJs: true` for a commit/branch to surface JS issues; fix critical ones.4. Use `any` as temporary bridge: prefer specific types but allow `any` for complex shapes. Add TODO comments with issue numbers.5. Use `// @ts-ignore` only for unavoidable external typing gaps, and immediately file follow-up tasks.6. Codemods & automation: use ts-migrate, jscodeshift, and react-codemod patterns to:- Convert propTypes -> TS interfaces- Rename .js -> .tsx- Insert missing imports/types7. CI & linting: add type-check GitHub Action on a subset path, require PR-level type coverage gradually.8. Cleanup: iterate to replace `any` and remove `@ts-ignore`, enforce stricter compiler flags (`noImplicitAny`, `strict`) progressively.

**Risks & mitigations**- Big-bang type errors: mitigate by small batches, feature-branch checks.- Drift from runtime: keep tests and storybook snapshots green after each change.

This approach balances safety, velocity, and automation for a large React codebase.

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.