Cursor rule

1---
2alwaysApply: false
3---
4 
5## Lift State into Provider Components
6 
7Move state management into dedicated provider components. This allows sibling
8components outside the main UI to access and modify state without prop drilling
9or awkward refs.
10 
11**Incorrect (state trapped inside component):**
12 
13```tsx
14function ForwardMessageComposer() {
15  const [state, setState] = useState(initialState)
16  const forwardMessage = useForwardMessage()
17 
18  return (
19    <Composer.Frame>
20      <Composer.Input />
21      <Composer.Footer />
22    </Composer.Frame>
23  )
24}
25 
26// Problem: How does this button access composer state?
27function ForwardMessageDialog() {
28  return (
29    <Dialog>
30      <ForwardMessageComposer />
31      <MessagePreview /> {/* Needs composer state */}
32      <DialogActions>
33        <CancelButton />
34        <ForwardButton /> {/* Needs to call submit */}
35      </DialogActions>
36    </Dialog>
37  )
38}
39```
40 
41**Incorrect (useEffect to sync state up):**
42 
43```tsx
44function ForwardMessageDialog() {
45  const [input, setInput] = useState('')
46  return (
47    <Dialog>
48      <ForwardMessageComposer onInputChange={setInput} />
49      <MessagePreview input={input} />
50    </Dialog>
51  )
52}
53 
54function ForwardMessageComposer({ onInputChange }) {
55  const [state, setState] = useState(initialState)
56  useEffect(() => {
57    onInputChange(state.input) // Sync on every change 😬
58  }, [state.input])
59}
60```
61 
62**Incorrect (reading state from ref on submit):**
63 
64```tsx
65function ForwardMessageDialog() {
66  const stateRef = useRef(null)
67  return (
68    <Dialog>
69      <ForwardMessageComposer stateRef={stateRef} />
70      <ForwardButton onPress={() => submit(stateRef.current)} />
71    </Dialog>
72  )
73}
74```
75 
76**Correct (state lifted to provider):**
77 
78```tsx
79function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
80  const [state, setState] = useState(initialState)
81  const forwardMessage = useForwardMessage()
82  const inputRef = useRef(null)
83 
84  return (
85    <Composer.Provider
86      state={state}
87      actions={{ update: setState, submit: forwardMessage }}
88      meta={{ inputRef }}
89    >
90      {children}
91    </Composer.Provider>
92  )
93}
94 
95function ForwardMessageDialog() {
96  return (
97    <ForwardMessageProvider>
98      <Dialog>
99        <ForwardMessageComposer />
100        <MessagePreview /> {/* Custom components can access state and actions */}
101        <DialogActions>
102          <CancelButton />
103          <ForwardButton /> {/* Custom components can access state and actions */}
104        </DialogActions>
105      </Dialog>
106    </ForwardMessageProvider>
107  )
108}
109 
110function ForwardButton() {
111  const { actions } = use(Composer.Context)
112  return <Button onPress={actions.submit}>Forward</Button>
113}
114```
115 
116The ForwardButton lives outside the Composer.Frame but still has access to the
117submit action because it's within the provider. Even though it's a one-off
118component, it can still access the composer's state and actions from outside the
119UI itself.
120 
121**Key insight:** Components that need shared state don't have to be visually
122nested inside each other—they just need to be within the same provider.
123