Building Flexible UIs with the Render Props Pattern in React

Overview

The Render Props pattern is a powerful tool in React. It allows for maximum flexibility and reusability by sharing logic between components while letting consumers decide exactly how to render things. Although modern React leans heavily on hooks, Render Props remain relevant—especially when you want clear separation of concerns. Let’s dive into a real-world example: a generic List component using Render Props.

What Is a Render Prop?

A render prop is a prop (usually children) that’s a function. The component calls this function to render its output, passing in useful state or data. This gives consumers total control over how things are rendered, while encapsulating what is being done.

The Goal: A Flexible List Component

You’re building a <List /> component that accepts an array of data and lets consumers decide how each item should be rendered.

Without Render Props:

Without Render Props

function List({ items }) {
  return (
      <ul>
      {items.map(item => (
          <li>{item.label}</li>
      ))}
      </ul>
  );
}

This works fine—until someone wants to:

Add an icon
Wrap items in a link
Style them differently

This tightly couples data structure and rendering.

With Render Props: Clean Separation

Let’s refactor using the Render Props pattern:

List.tsx

List Component with Render Props

type ListProps<T> = {
  items: T[];
  children: (item: T, index: number) => React.ReactNode;
};

{/* 
To enforce that each item has an id:

  type ListProps<T extends { id: string }> = {
      items: T[];
      children: (item: T, index: number) => React.ReactNode;
  };
*/}

function List<T>({ items, children }: ListProps<T>) {
  return (
      <ul>
          {items.map((item, index) => (
              <li key={index}>{children(item, index)}</li>
          ))}
      </ul>
  );
}

T is a generic type — this list can handle any data structure.
children is a function that receives each item and index.

Usage Example

Here’s how to use it for different cases:

Basic Usage Example

const users = [
  { id: 1, name: 'Alice', avatar: '👩' },
  { id: 2, name: 'Bob', avatar: '👨' },
];

<List items={users}>
  {(user) => (
      <div>
          <span>{user.avatar}</span> {user.name}
      </div>
  )}
</List>

Want to wrap each user in a link? No problem:

Wrapping Items in Links

<List items={users}>
  {(user) => (
      <a href={`/profile/${user.id}`}>
          {user.name}
      </a>
  )}
</List>

Now the List component stays generic, and rendering is completely controlled by the consumer.

Benefits of Render Props

✅ Highly flexible — rendering is in your control.
🔁 Logic reuse — the logic to loop, wrap in <ul>, handle keys stays inside.
🧠 Generic-friendly — works perfectly with TypeScript generics.

Render Props vs Hooks

You might be wondering, “Can’t I just use hooks?” Yes, but hooks are logic-only—they don’t handle rendering. Render Props combine:

Encapsulated logic
Render control

Think of them as the precursor to hooks for logic sharing, but they’re still useful when building libraries or headless UI components.

Real-World Inspiration

Many libraries still embrace this pattern:

🔗 React Router: <Route render={...} />
🔍 Hero UI |(Next UI)
📅 React Table: Render Props for rows and cells (older versions)

Gotchas

🌀 Avoid deeply nested render props (callback hell).

Summary

The Render Props pattern lets you:

Build logic-heavy but UI-agnostic components.
Delegate rendering to the user.
Stay type-safe and generic with TypeScript.

Want More?

Next, I will cover related patterns like:

🧱 Compound Components
⚙️ Prop Collections & Getters (used in React Hook Form & Downshift)