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