0Pricing
React Academy · Lesson

Render Props Pattern

Pass a function as a prop that returns JSX to share behavior without coupling UI.

Welcome

In this lesson you will understand the render props pattern — passing a function as a prop that returns JSX — and learn when it is useful for sharing behaviour across components.

What Is Render Props?

Render props is a pattern where a component accepts a prop that is a function. The component calls this function to produce its rendered output. The consumer controls the UI; the component provides the behaviour.
<DataProvider render={data => <UserCard user={data} />} />

All lessons in this course

  1. Render Props Pattern
  2. Higher-Order Components (HOCs) Explained
  3. HOC vs Render Props vs Custom Hooks
  4. Refactoring a HOC to a Custom Hook
← Back to React Academy