Advanced Patterns

🎭 The Magic Theatre: React’s Advanced Component Patterns

Imagine you’re the director of a magical theatre. Your actors (components) need to share costumes, learn new tricks, and work together in amazing ways. Let’s discover the four secret patterns that make this theatre truly spectacular!

🎪 Our Theatre Analogy

Think of your React app as a magical theatre:

• Components = Actors on stage
• Props = Scripts and costumes actors receive
• State = Memories actors keep
• Patterns = The magic tricks that make shows amazing!

Today, we learn 4 powerful magic tricks that professional directors use!

🧙‍♂️ Pattern 1: Higher-Order Components (HOCs)

What Is It?

A Higher-Order Component is like a costume shop in our theatre.

🎭 Simple Idea: An actor walks into the costume shop plain, and walks out wearing a superhero cape!

The costume shop (HOC) takes a regular actor (component) and gives them superpowers (extra props/abilities).

Real Life Example

// The Costume Shop (HOC)
function withSuperCape(Actor) {
  return function SuperActor(props) {
    return (
      <Actor
        {...props}
        canFly={true}
        power="super strength"
      />
    );
  };
}

// Plain actor
function Hero({ name, canFly, power }) {
  return (
    <div>
      {name} can fly: {canFly ? 'Yes!' : 'No'}
      <br />
      Power: {power}
    </div>
  );
}

// Actor with cape!
const SuperHero = withSuperCape(Hero);

// Using it:
<SuperHero name="Tim" />
// Tim can fly: Yes!
// Power: super strength

How It Works

graph TD
    A["Plain Component"] --> B["HOC Costume Shop"]
    B --> C["Enhanced Component"]
    C --> D["Has Extra Powers!"]

When To Use

✅ Adding the same feature to many components ✅ Sharing loading states, error handling, or data fetching ✅ Authentication checks before showing content

Quick Pattern

// HOC template
function withFeature(WrappedComponent) {
  return function Enhanced(props) {
    // Add your magic here
    const extraStuff = { magic: true };

    return (
      <WrappedComponent
        {...props}
        {...extraStuff}
      />
    );
  };
}

🎁 Pattern 2: Render Props

What Is It?

Render Props is like giving an actor a blank script where you decide what they say!

🎭 Simple Idea: Instead of the actor knowing all their lines, YOU write the script and hand it to them!

The component does the hard work (tracking mouse, fetching data) but lets YOU decide how to show it.

Real Life Example

// Mouse tracker with render prop
function MouseTracker({ render }) {
  const [position, setPosition] =
    useState({ x: 0, y: 0 });

  const handleMove = (e) => {
    setPosition({
      x: e.clientX,
      y: e.clientY
    });
  };

  return (
    <div onMouseMove={handleMove}>
      {render(position)}
    </div>
  );
}

// YOU decide what to show!
<MouseTracker
  render={({ x, y }) => (
    <p>Mouse at: {x}, {y}</p>
  )}
/>

// Or show a cat that follows!
<MouseTracker
  render={({ x, y }) => (
    <img
      src="cat.png"
      style={{ left: x, top: y }}
    />
  )}
/>

How It Works

graph TD
    A["Component Does Work"] --> B["Calls Your Function"]
    B --> C["You Get The Data"]
    C --> D["You Decide Display"]

The “Children as Function” Variation

Same idea, but using children:

function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData);
  }, [url]);

  return children(data);
}

// Using it:
<DataFetcher url="/api/user">
  {(user) => (
    user ? <p>Hello {user.name}!</p>
         : <p>Loading...</p>
  )}
</DataFetcher>

When To Use

✅ Sharing behavior (mouse tracking, data fetching) ✅ When you want flexibility in what gets rendered ✅ Creating reusable logic components

🎪 Pattern 3: Compound Components

What Is It?

Compound Components are like actors in a theatre troupe who only make sense together!

🎭 Simple Idea: Think of a <select> and <option>. An <option> alone is useless. They NEED each other!

Components that work as a team, sharing a secret connection.

Real Life Example

// The Theatre Troupe!
function Menu({ children }) {
  const [open, setOpen] = useState(false);

  return (
    <MenuContext.Provider
      value={{ open, setOpen }}
    >
      <div className="menu">
        {children}
      </div>
    </MenuContext.Provider>
  );
}

function MenuButton({ children }) {
  const { setOpen } = useContext(MenuContext);
  return (
    <button onClick={() => setOpen(o => !o)}>
      {children}
    </button>
  );
}

function MenuList({ children }) {
  const { open } = useContext(MenuContext);
  if (!open) return null;
  return <ul>{children}</ul>;
}

function MenuItem({ children, onClick }) {
  const { setOpen } = useContext(MenuContext);
  return (
    <li onClick={() => {
      onClick?.();
      setOpen(false);
    }}>
      {children}
    </li>
  );
}

// Attach sub-components
Menu.Button = MenuButton;
Menu.List = MenuList;
Menu.Item = MenuItem;

Using The Troupe

<Menu>
  <Menu.Button>Open Menu</Menu.Button>
  <Menu.List>
    <Menu.Item>Save</Menu.Item>
    <Menu.Item>Edit</Menu.Item>
    <Menu.Item>Delete</Menu.Item>
  </Menu.List>
</Menu>

How It Works

graph TD
    A["Parent Menu"] --> B["Creates Context"]
    B --> C["Button Uses Context"]
    B --> D["List Uses Context"]
    B --> E["Items Use Context"]
    C --> F["All Stay In Sync!"]
    D --> F
    E --> F

When To Use

✅ Building UI component libraries (tabs, accordions, menus) ✅ Components that must work together ✅ When you want a clean, readable API

🌟 Pattern 4: Provider Pattern

What Is It?

The Provider Pattern is like the backstage manager who gives ALL actors what they need!

🎭 Simple Idea: Instead of passing costumes to each actor one by one, the backstage manager makes costumes available to EVERYONE who needs them!

No more “prop drilling” through many levels!

The Problem It Solves

// ❌ Without Provider (Prop Drilling)
<App user={user}>
  <Layout user={user}>
    <Sidebar user={user}>
      <Avatar user={user} />
    </Sidebar>
  </Layout>
</App>
// Passing user through 4 levels! 😫

The Solution

// Create the backstage manager
const UserContext = createContext(null);

// The Provider (backstage)
function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  return (
    <UserContext.Provider
      value={{ user, setUser }}
    >
      {children}
    </UserContext.Provider>
  );
}

// Custom hook for easy access
function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error(
      'useUser must be inside UserProvider'
    );
  }
  return context;
}

Using The Provider

// Wrap your app once
<UserProvider>
  <App />
</UserProvider>

// Now ANY component can access user!
function Avatar() {
  const { user } = useUser();
  return <img src={user?.avatar} />;
}

function ProfileName() {
  const { user } = useUser();
  return <h1>{user?.name}</h1>;
}
// No props passed! Magic! ✨

How It Works

graph TD
    A["Provider at Top"] --> B["Holds The Data"]
    B --> C["Any Child Anywhere"]
    C --> D["Can Access Data"]
    D --> E["No Prop Drilling!"]

Multiple Providers

<ThemeProvider>
  <AuthProvider>
    <CartProvider>
      <App />
    </CartProvider>
  </AuthProvider>
</ThemeProvider>

When To Use

✅ Global state (user, theme, language) ✅ Data needed by many distant components ✅ Avoiding prop drilling

🎯 Pattern Comparison

🚀 Quick Decision Guide

graph TD
    A["Need to Share Something?"] --> B{What?}
    B -->|Same Feature Many Places| C["Use HOC"]
    B -->|Behavior + Flexible UI| D["Use Render Props"]
    B -->|Team of Components| E["Use Compound"]
    B -->|Global Data Everywhere| F["Use Provider"]

✨ Key Takeaways

1. HOCs wrap components to add superpowers
2. Render Props let YOU decide what to display with shared data
3. Compound Components work as a team sharing secret state
4. Provider Pattern makes data available everywhere without passing props

You’re now ready to direct the most amazing React theatre ever! 🎭

Remember: These patterns aren’t rules—they’re tools. Pick the right tool for each job, and your code will be cleaner, more flexible, and easier to understand!