Chapter 6: React Components & Props

1. What is a React Component?

In React, a component is an independent, reusable piece of code that defines how a section of the user interface should appear and behave. Rather than mixing presentation and behavior arbitrarily across large files, components encapsulate their own structure (JSX), styling (CSS/Modules), and state logic into a unified building block.

Functional Components (The Modern Standard):

A modern React component is simply a JavaScript function that accepts an optional props object as its parameter and returns React elements (JSX):

// A pure functional component
function UserBadge(props) {
  return (
    <div className="badge-container">
      <img src={props.avatarUrl} alt={props.username} />
      <span>{props.username}</span>
    </div>
  );
}

export default UserBadge;

2. Functional Components vs. Legacy Class Components

Before React 16.8 (2019), components requiring state or lifecycle methods had to be written as ES6 Classes. Today, functional components paired with Hooks have rendered class components obsolete. Understanding the comparison is still crucial when maintaining enterprise codebases:

3. Understanding Props & Destructuring

Props (short for properties) are inputs passed from a parent component down to a child component. Props are strictly read-only. A component must never mutate the props it receives!

Clean Parameter Destructuring & Default Values:

Instead of accessing props.title and props.price repeatedly, clean modern code destructures properties directly inside the function signature:

// Clean destructuring with default fallback values
function ProductCard({ 
  title, 
  price, 
  category = "General", 
  inStock = true, 
  onAddToCart 
}) {
  return (
    <article className="product-card">
      <span className="category-pill">{category}</span>
      <h3>{title}</h3>
      <p className="price">${price.toFixed(2)}</p>
      
      {inStock ? (
        <button onClick={onAddToCart} className="btn-buy">
          Add to Cart
        </button>
      ) : (
        <span className="out-of-stock">Sold Out</span>
      )}
    </article>
  );
}

4. The `children` Prop & Component Composition

Sometimes a component cannot know its children ahead of time (for example, generic containers like dialogs, sidebars, or cards). React provides the special children prop to pass nested JSX directly through:

// 1. Generic Container Component
function ModalCard({ title, children }) {
  return (
    <div className="modal-backdrop">
      <div className="modal-card">
        <header className="modal-header">
          <h3>{title}</h3>
        </header>
        <div className="modal-body">
          {children} {/* Renders whatever is nested inside */}
        </div>
      </div>
    </div>
  );
}

// 2. Consuming Component
function ProfileSettings() {
  return (
    <ModalCard title="Account Settings">
      <p>Manage your password and security keys here.</p>
      <button className="btn-save">Update Password</button>
    </ModalCard>
  );
}

Composition vs. Inheritance:

In object-oriented programming, developers frequently create complex inheritance hierarchies (e.g., SpecialButton extends Button). In React, the Meta team strongly advocates Composition over Inheritance. Components can accept other components as props or nest them via children, making inheritance completely unnecessary.

5. The Prop Drilling Problem & Architectural Remedies

Prop drilling occurs when a piece of data needed by a deeply nested component must be threaded through several layers of intermediate parent components that have no use for that data:

How to Mitigate Prop Drilling:

• Component Composition (Slot Pattern): Pass the child component directly as a prop (e.g., <Sidebar avatar={<Avatar user={user} />} />). Intermediate containers don't need to know what props the avatar requires!
• React Context API: Broadcast global data (authentication, theme, language) directly across the component tree without manual passing.
• Global State Stores: Use libraries like Zustand or Redux Toolkit for complex application state.

Frequently Asked Questions (FAQ)