🚀 Building Reusable Components — Design for Flexibility

The goal of using props is to create components that work in many different contexts. A truly reusable component doesn't need to be modified—it just needs the right props passed to it.

🎯 The Reusability Principle

Instead of creating separate components for each use case, create one flexible component. Use props to customize its behavior and appearance:

When you design a component, ask: "What will change in different contexts?" Everything that changes should be a prop. Everything that stays the same can be hard-coded.

// ❌ Not reusable - hardcoded for one use
function ErrorAlert() {
  return (
    <div style={{ backgroundColor: 'red', padding: '10px' }}>
      Error: Something went wrong!
    </div>
  );
}

// ✅ Reusable - works for many uses
function Alert({ type = "error", message, onClose }) {
  const colors = { error: "red", success: "green", warning: "orange" };
  return (
    <div style={{ backgroundColor: colors[type], padding: "10px" }}>
      {message}
      {onClose && <button onClick={onClose}>Dismiss</button>}
    </div>
  );
}

// Now use everywhere
<Alert type="error" message="Error occurred!" />
<Alert type="success" message="Saved!" onClose={() => {}} />

<details>

<summary>📚 More Examples</summary>

// Card component that works in many contexts
function Card({ title, children, variant = "default" }) {
  const styles = {
    default: { border: "1px solid #ccc" },
    elevated: { boxShadow: "0 2px 8px rgba(0,0,0,0.1)" },
    outline: { border: "2px solid #333" },
  };

  return (
    <div style={{ padding: "16px", ...styles[variant] }}>
      <h2>{title}</h2>
      {children}
    </div>
  );
}

// Same component, different appearances
<Card title="Simple">Content</Card>
<Card title="Fancy" variant="elevated">Content</Card>
<Card title="Bold" variant="outline">Content</Card>

</details>

💡 Composition: Building Larger Components from Smaller Ones

Instead of creating one huge component, build smaller focused components and combine them. This makes each piece reusable and easier to understand:

function Button({ text, onClick, color = "blue" }) {
  return <button style={{ background: color }}>{text}</button>;
}

function Title({ children }) {
  return <h2 style={{ marginBottom: "8px" }}>{children}</h2>;
}

function Card({ children }) {
  return <div style={{ border: "1px solid #ddd", padding: "16px" }}>{children}</div>;
}

// Compose them into a larger component
function UserCard({ user }) {
  return (
    <Card>
      <Title>{user.name}</Title>
      <p>{user.bio}</p>
      <Button text="Follow" color="blue" onClick={() => {}} />
    </Card>
  );
}

<details>

<summary>📚 More Examples</summary>

// Modal component that wraps content
function Modal({ title, children, onClose }) {
  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>{title}</h2>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

// Use it for different modals without modification
<Modal title="Confirm" onClose={handleClose}>
  <p>Are you sure?</p>
  <button>Yes</button>
</Modal>

<Modal title="Settings" onClose={handleClose}>
  <SettingsForm />
</Modal>

</details>

🎨 Real-World Example: Flexible List Item

function ListItem({
  icon,
  title,
  subtitle,
  onClick,
  selected = false,
  disabled = false,
}) {
  return (
    <div
      onClick={!disabled ? onClick : undefined}
      style={{
        padding: "12px",
        backgroundColor: selected ? "#e0e7ff" : "transparent",
        opacity: disabled ? 0.5 : 1,
        cursor: disabled ? "not-allowed" : "pointer",
      }}
    >
      {icon && <span style={{ marginRight: "8px" }}>{icon}</span>}
      <div>
        <strong>{title}</strong>
        {subtitle && <div style={{ fontSize: "0.9em" }}>{subtitle}</div>}
      </div>
    </div>
  );
}

// Works in many contexts
<ListItem icon="📧" title="Messages" subtitle="5 new" onClick={handleClick} />
<ListItem icon="⚙️" title="Settings" disabled />
<ListItem icon="👤" title="Profile" selected />

🔑 Key Takeaways

• ✅ Design components to work in many contexts

• ✅ Use props instead of hard-coding values

• ✅ Provide sensible default prop values

• ✅ Think about what might change and make it customizable

• ✅ Compose larger components from smaller reusable ones

• ✅ Test your component in different scenarios

• ✅ Document what props your component accepts

• ✅ Reusable components save time and reduce bugs

Ready to practice? Challenges | Take the Quiz