Back to all comparisonsTechPref
React Component Patterns

Destructure Props vs Don't Destructure Props

Should React components destructure their props or access them through the props object? Explore how top TypeScript projects handle component props.

80%

Use Destructure

20%

Use Props Object

Team Destructure

Pull out the props you need up front for concise, readable component code.

Code Example

Button.tsx (destructured props)
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Key Benefits

  • Concise references without the `props.` prefix
  • Makes used props visible at a glance
  • Enables renaming and default values inline
  • Plays nicely with TypeScript inference
  • Less repetition inside JSX
  • Encourages smaller, focused components

Statistics

Team Props Object

Keep everything on the props object to stay explicit about where each value comes from.

Code Example

Button.tsx (props object)
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button(props: ButtonProps) {
  return (
    <button onClick={props.onClick} disabled={props.disabled}>
      {props.label}
    </button>
  );
}

Key Benefits

  • Explicit about which values come from props
  • Easier to forward the full props object
  • Avoids long destructuring patterns for many props
  • Keeps the function signature short
  • Simpler when adding new props over time
  • Familiar to developers from class component days

Statistics

Additional Insights

More data points to help you make an informed decision for your team.

480

repositories analyzed