render-props-pattern

SKILL.md

Render Props Pattern

Table of Contents

When to Use

When NOT to Use

Instructions

Details

Source

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