Props

🔍 What Is It?

Props are read-only inputs passed to a component from its parent. Every React component receives a single props object. In modern React, we always destructure it in the function signature.

• →Props can be any JavaScript value: strings, numbers, booleans, objects, arrays, functions, or even other React components
• →Props flow one direction only — parent to child (unidirectional data flow)
• →A component must never modify its own props — they are immutable from the component's perspective
• →The children prop is special — it represents the JSX placed between opening and closing tags
• →Callback props (functions passed as props) are how children communicate back to parents

🎯 Why Do We Need It?

Props are what make components reusable. Without props, a Button component could only ever say "Click me" with a fixed blue colour. With props, the same Button can say anything, in any colour, trigger any action.

Props enforce unidirectional data flow — data flows down, events flow up. This makes React apps predictable: to understand why a component looks a certain way, you only need to look at the props it received, not the entire application state.

In interviews, this is often asked as: "What is one-way data binding in React?" — props are the answer.

🏗️ What Happens in Real Projects?

Props are used in every component in every React project. Real patterns:

• →Configuration props — <Button variant="primary" size="lg" loading={isSubmitting} />
• →Data props — <PolicyCard policy={policyData} />
• →Callback props — <DataTable onRowClick={handleRowSelect} onSort={handleSort} />
• →Children — <Modal title="Confirm"><ConfirmationForm /></Modal>
• →Render props — <DataProvider render={(data) => <Chart data={data} />} />
• →Spreading props — <input {...register('email')} /> (React Hook Form)

⚙️ How It Works

When you write <UserCard name="Alice" role="admin" onEdit={handleEdit} />, React calls your UserCard function with { name: "Alice", role: "admin", onEdit: handleEdit } as the argument.

Default props — set with default parameter values in the function signature:

function Button({ variant = 'primary', size = 'md' }: ButtonProps)

Prop spreading — <input {...inputProps} /> passes all properties of an object as individual props. Useful for forwarding HTML attributes.

children prop — anything between opening and closing JSX tags becomes props.children. Type it as React.ReactNode for maximum flexibility.

Prop drilling — passing props through many intermediate layers to reach a deeply nested child. When drilling exceeds 2–3 levels, consider Context or a state manager.

💻 Example

Props Patterns in Production — Typed props, defaults, callbacks, and children patterns used in real projects.

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  icon?: React.ReactNode;
  onClick?: () => void;
}

export function Button({
  label,
  variant = 'primary',
  size = 'md',
  loading = false,
  disabled = false,
  icon,
  onClick,
}: ButtonProps) {
  return (
    <button
      className={`btn btn--${variant} btn--${size}`}
      disabled={disabled || loading}
      onClick={onClick}
    >
      {loading ? <Spinner size={14} /> : icon}
      {label}
    </button>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits