Render Props Pattern

This teaches the render props pattern where you pass a function as a prop that returns JSX, letting components share stateful logic without lifting state everywhere. The skill walks through a temperature converter example, showing how an Input component can pass its internal state down to Kelvin and Fahrenheit components via a render function or children-as-function. It's honest about when not to use this: modern React code usually reaches for custom Hooks instead, and nested render props get ugly fast. Good reference if you're maintaining older React codebases or need to understand this pattern before refactoring to Hooks, but you probably shouldn't be writing new render props in 2024.

skills.sh installs: 1.1K
GitHub stars: 258
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add patternsdev/skills --skill render-props-pattern --agent claude-code

Installs into .claude/skills of the current project.

Files

Another way of making components very reusable, is by using the render prop pattern. A render prop is a prop on a component, which value is a function that returns a JSX element. The component itself does not render anything besides the render prop. Instead, the component simply calls the render prop, instead of implementing its own rendering logic.

Imagine that we have a Title component. In this case, the Title component shouldn't do anything besides rendering the value that we pass. We can use a render prop for this! Let's pass the value that we want the Title component to render to the render prop.

When to Use

Use this when you need to share stateful logic between components with different rendering needs
This is helpful when the HOC pattern creates naming collision issues or overly deep nesting