1---
2title: Prefer Composing Children Over Render Props
3impact: MEDIUM
4impactDescription: cleaner composition, better readability
5tags: composition, children, render-props
6---
7 
8## Prefer Children Over Render Props
9 
10Use `children` for composition instead of `renderX` props. Children are more
11readable, compose naturally, and don't require understanding callback
12signatures.
13 
14**Incorrect (render props):**
15 
16```tsx
17function Composer({
18  renderHeader,
19  renderFooter,
20  renderActions,
21}: {
22  renderHeader?: () => React.ReactNode
23  renderFooter?: () => React.ReactNode
24  renderActions?: () => React.ReactNode
25}) {
26  return (
27    <form>
28      {renderHeader?.()}
29      <Input />
30      {renderFooter ? renderFooter() : <DefaultFooter />}
31      {renderActions?.()}
32    </form>
33  )
34}
35 
36// Usage is awkward and inflexible
37return (
38  <Composer
39    renderHeader={() => <CustomHeader />}
40    renderFooter={() => (
41      <>
42        <Formatting />
43        <Emojis />
44      </>
45    )}
46    renderActions={() => <SubmitButton />}
47  />
48)
49```
50 
51**Correct (compound components with children):**
52 
53```tsx
54function ComposerFrame({ children }: { children: React.ReactNode }) {
55  return <form>{children}</form>
56}
57 
58function ComposerFooter({ children }: { children: React.ReactNode }) {
59  return <footer className='flex'>{children}</footer>
60}
61 
62// Usage is flexible
63return (
64  <Composer.Frame>
65    <CustomHeader />
66    <Composer.Input />
67    <Composer.Footer>
68      <Composer.Formatting />
69      <Composer.Emojis />
70      <SubmitButton />
71    </Composer.Footer>
72  </Composer.Frame>
73)
74```
75 
76**When render props are appropriate:**
77 
78```tsx
79// Render props work well when you need to pass data back
80<List
81  data={items}
82  renderItem={({ item, index }) => <Item item={item} index={index} />}
83/>
84```
85 
86Use render props when the parent needs to provide data or state to the child.
87Use children when composing static structure.
88