What is prop spreading and when is it an anti-pattern?

// ✅ Legitimate use — forwarding unknown props to underlying element
function Button({ variant, className, ...rest }) {
  return (
    
  );
}

// ❌ Anti-pattern 1 — unknown DOM attributes cause React warnings
function Box({ color, ...rest }) {
  return 
; // if 'color' is in rest, "Unknown prop 'color'" warning
}

// ✅ Fix — destructure all custom props, only spread standard ones
function Box({ color, size, children, ...htmlProps }) {
  return 
{children}
;
}

// ❌ Anti-pattern 2 — spreading all parent props down
function Parent(props) {
  return ; // leaks parent-specific props to child
}

// ❌ Anti-pattern 3 — security risk with user-provided data
// If attackers control the props object, they could inject onClick etc.
const userConfig = JSON.parse(untrustedInput);
 // dangerous!