Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

View sourceReactArchitecture

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns
title
Prefer Composing Children Over Render Props
impact
MEDIUM
impactDescription
cleaner composition, better readability
tags
composition, children, render-props

Prefer Children Over Render Props

Use children for composition instead of renderX props. Children are more readable, compose naturally, and don't require understanding callback signatures.

Incorrect (render props):

tsx
function Composer({  renderHeader,  renderFooter,  renderActions,}: {  renderHeader?: () => React.ReactNode  renderFooter?: () => React.ReactNode  renderActions?: () => React.ReactNode}) {  return (    <form>      {renderHeader?.()}      <Input />      {renderFooter ? renderFooter() : <DefaultFooter />}      {renderActions?.()}    </form>  )}
// Usage is awkward and inflexiblereturn (  <Composer    renderHeader={() => <CustomHeader />}    renderFooter={() => (      <>        <Formatting />        <Emojis />      </>    )}    renderActions={() => <SubmitButton />}  />)

Correct (compound components with children):

tsx
function ComposerFrame({ children }: { children: React.ReactNode }) {  return <form>{children}</form>}
function ComposerFooter({ children }: { children: React.ReactNode }) {  return <footer className='flex'>{children}</footer>}
// Usage is flexiblereturn (  <Composer.Frame>    <CustomHeader />    <Composer.Input />    <Composer.Footer>      <Composer.Formatting />      <Composer.Emojis />      <SubmitButton />    </Composer.Footer>  </Composer.Frame>)

When render props are appropriate:

tsx
// Render props work well when you need to pass data back<List  data={items}  renderItem={({ item, index }) => <Item item={item} index={index} />}/>

Use render props when the parent needs to provide data or state to the child. Use children when composing static structure.