Back to all comparisonsTechPref
React Component Patterns

Destructure in Signature vs Outside Signature

When destructuring props, should it happen right in the function signature or inside the function body? Compare how top TypeScript projects split on this React styling question.

0%

Use Destructure in Signature

100%

Use Destructure Outside Signature

Destructure in Signature

Pull out each prop directly in the function parameter list for a concise, declarative component header.

Code Example

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

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

Key Benefits

  • All destructured props visible in the signature
  • Inline defaults and renames alongside the types
  • No extra statement at the top of the body
  • Encouraged by common React style guides
  • Self-documents the component's API
  • Shorter component body

Statistics

0%

of analyzed repos

0

repositories

Popular Projects

Destructure Outside Signature

Accept the props object and destructure it inside the body — handy when props are still used as a whole.

Code Example

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

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

Key Benefits

  • Keeps the full props object available for forwarding
  • Cleaner signatures for components with many props
  • Easier to add or remove destructured fields later
  • Co-locates destructuring with any derived logic
  • Friendlier to hooks that need the whole props object
  • Simpler diffs when signatures would otherwise wrap

Statistics

Additional Insights

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

986

repositories analyzed