Render Props
Last updated: 2026-11-02
Render Props Render Props
Render props means passing the JSX you want rendered to a component as a function prop: the component owns the logic and the state, while the caller receives the data as an argument and decides what to render. It decouples logic reuse from UI customization, and it was the most common reuse pattern before hooks arrived. Because the data arrives as a plain argument, one implementation can serve many very different interfaces without knowing anything about any of them.
| Group | Component Patterns |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function DataProvider({ render }) {
const data = /* the data produced by the logic */
return render(data) // call the render function and hand the data back
}
// usage: <DataProvider render={data => <List items={data} />} />Returns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The same Counter logic is rendered into two completely different interfaces, and the two counters accumulate independently without interfering with each other.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
