Cursor rule

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