Lesson 23 — Render Props Pattern (Sharing Logic the Right Way)

🧭 Introduction

As React applications grow, a common challenge appears:

❓ How do I share logic between components without duplicating code?

Before hooks existed, React introduced a powerful pattern to solve this problem:

Render Props Pattern

Even today, understanding render props is important because:

• You’ll see it in existing codebases
• Many libraries still use it
• It strengthens your component composition thinking

This lesson explains what render props are, how they work, and when to use them — in a clear, modern way.

🎯 What You’ll Learn in This Lesson

By the end of this lesson, you will understand:

• What the render props pattern is
• Why it was introduced
• How to implement render props
• Real-world examples
• Pros and cons
• Render props vs Hooks

🧠 What Is the Render Props Pattern?

The Render Props Pattern means:

Passing a function as a prop that returns JSX.

Instead of a component deciding what to render, it asks the parent:

“How should I render this?”

🧩 Simple Definition

<Component render={(data) => <UI />} />

Here:

• render is a function
• The component calls it internally
• JSX is returned dynamically

🔍 Basic Example — Mouse Tracker

Step 1: Logic Component

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} style={{ height: "100vh" }}>
      {render(position)}
    </div>
  );
}

Step 2: UI Component

function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <h2>Mouse position: {x}, {y}</h2>
      )}
    />
  );
}

✔ Logic is reusable
✔ UI is flexible
✔ No duplication

🧠 Why Render Props Were Introduced

Before hooks:

• HOCs caused wrapper hell
• Logic reuse was difficult
• Components became bloated

Render props provided:

• Explicit data flow
• Flexible rendering
• Better composition

🧠 Render Prop via children (Common Style)

Instead of render, many components use children as a function.

Example

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

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(setData);
  }, []);

  return children(data);
}

Usage

<DataFetcher>
  {(users) => (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  )}
</DataFetcher>

✔ Cleaner syntax
✔ More idiomatic

🧠 What Problems Render Props Solve

Render props help when:

• Logic must be reused
• UI must vary
• State should be shared

Examples:

• Mouse tracking
• Fetching data
• Form validation
• Toggle behavior

❌ Common Mistakes

❌ Inline Heavy Logic

Leads to unreadable JSX.

❌ Deep Nesting

Too many render props = poor readability.

❌ Overusing Render Props Today

Hooks are often a better choice.

🆚 Render Props vs HOCs vs Hooks

👉 Hooks are now the default solution.

🧠 Render Props vs Hooks (Example)

Render Props

<Toggle>
  {(isOn, toggle) => (
    <button onClick={toggle}>
      {isOn ? "ON" : "OFF"}
    </button>
  )}
</Toggle>

Hooks (Cleaner)

const [isOn, toggle] = useToggle();

✔ Less nesting
✔ Better readability

🧠 When Should You Use Render Props Today?

Use render props when:

• Working with older codebases
• Using libraries built on render props
• You need full control over rendering

Avoid them for new logic-heavy features.

🎯 Best Practices (Senior-Level)

✅ Keep render prop functions small
✅ Prefer children-as-function pattern
✅ Avoid deep nesting
✅ Use hooks for new code
✅ Understand render props for maintenance

❓ FAQs — Render Props Pattern

🔹 Are render props deprecated?

No — but hooks are preferred.

🔹 Do modern libraries still use render props?

Yes — especially older or highly flexible ones.

🔹 Is this asked in interviews?

Yes — conceptually.

🔹 Should I rewrite render props to hooks?

Only when refactoring is needed.

🧠 Quick Recap

✔ Render props pass functions as props
✔ Enable logic reuse with flexible UI
✔ Powerful but verbose
✔ Hooks replaced most use cases
✔ Still important to understand

🎉 Conclusion

Render props taught React developers a crucial lesson:

Components don’t have to decide how UI looks — parents can.

Even though hooks dominate modern React, understanding render props:

• Makes you better at reading existing code
• Improves architectural thinking
• Strengthens interview confidence

This lesson prepares you for the final design pattern in this section ⚛️🧠

👉 Next Lesson

Lesson 24 — Compound Components Pattern