What are props and how is prop drilling a problem?

Props are the inputs to a component — passed from parent to child. They are read-only (immutable from the child's perspective).

function Button({ label, onClick, disabled = false }) {
  return {label};
}

// Usage

Prop drilling — passing props through intermediate components that don't need them, just so a deep child can access them:

// ❌ Drilling — Middle doesn't need user, just passes it down
function App() {
  const user = { name: 'Alice' };
  return ;
}
function Middle({ user }) {
  return ;
}
function Deep({ user }) {
  return 
{user.name}
;
}

Solutions to prop drilling:

• Context API — broadcast value to any descendant
• Component composition — lift rendering up, pass JSX as children or slots
• State management — Zustand, Redux, Jotai for global state