1---
2title: Define Generic Context Interfaces for Dependency Injection
3impact: HIGH
4impactDescription: enables dependency-injectable state across use-cases
5tags: composition, context, state, typescript, dependency-injection
6---
7 
8## Define Generic Context Interfaces for Dependency Injection
9 
10Define a **generic interface** for your component context with three parts:
11`state`, `actions`, and `meta`. This interface is a contract that any provider
12can implement—enabling the same UI components to work with completely different
13state implementations.
14 
15**Core principle:** Lift state, compose internals, make state
16dependency-injectable.
17 
18**Incorrect (UI coupled to specific state implementation):**
19 
20```tsx
21function ComposerInput() {
22  // Tightly coupled to a specific hook
23  const { input, setInput } = useChannelComposerState()
24  return <TextInput value={input} onChangeText={setInput} />
25}
26```
27 
28**Correct (generic interface enables dependency injection):**
29 
30```tsx
31// Define a GENERIC interface that any provider can implement
32interface ComposerState {
33  input: string
34  attachments: Attachment[]
35  isSubmitting: boolean
36}
37 
38interface ComposerActions {
39  update: (updater: (state: ComposerState) => ComposerState) => void
40  submit: () => void
41}
42 
43interface ComposerMeta {
44  inputRef: React.RefObject<TextInput>
45}
46 
47interface ComposerContextValue {
48  state: ComposerState
49  actions: ComposerActions
50  meta: ComposerMeta
51}
52 
53const ComposerContext = createContext<ComposerContextValue | null>(null)
54```
55 
56**UI components consume the interface, not the implementation:**
57 
58```tsx
59function ComposerInput() {
60  const {
61    state,
62    actions: { update },
63    meta,
64  } = use(ComposerContext)
65 
66  // This component works with ANY provider that implements the interface
67  return (
68    <TextInput
69      ref={meta.inputRef}
70      value={state.input}
71      onChangeText={(text) => update((s) => ({ ...s, input: text }))}
72    />
73  )
74}
75```
76 
77**Different providers implement the same interface:**
78 
79```tsx
80// Provider A: Local state for ephemeral forms
81function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
82  const [state, setState] = useState(initialState)
83  const inputRef = useRef(null)
84  const submit = useForwardMessage()
85 
86  return (
87    <ComposerContext
88      value={{
89        state,
90        actions: { update: setState, submit },
91        meta: { inputRef },
92      }}
93    >
94      {children}
95    </ComposerContext>
96  )
97}
98 
99// Provider B: Global synced state for channels
100function ChannelProvider({ channelId, children }: Props) {
101  const { state, update, submit } = useGlobalChannel(channelId)
102  const inputRef = useRef(null)
103 
104  return (
105    <ComposerContext
106      value={{
107        state,
108        actions: { update, submit },
109        meta: { inputRef },
110      }}
111    >
112      {children}
113    </ComposerContext>
114  )
115}
116```
117 
118**The same composed UI works with both:**
119 
120```tsx
121// Works with ForwardMessageProvider (local state)
122<ForwardMessageProvider>
123  <Composer.Frame>
124    <Composer.Input />
125    <Composer.Submit />
126  </Composer.Frame>
127</ForwardMessageProvider>
128 
129// Works with ChannelProvider (global synced state)
130<ChannelProvider channelId="abc">
131  <Composer.Frame>
132    <Composer.Input />
133    <Composer.Submit />
134  </Composer.Frame>
135</ChannelProvider>
136```
137 
138**Custom UI outside the component can access state and actions:**
139 
140The provider boundary is what matters—not the visual nesting. Components that
141need shared state don't have to be inside the `Composer.Frame`. They just need
142to be within the provider.
143 
144```tsx
145function ForwardMessageDialog() {
146  return (
147    <ForwardMessageProvider>
148      <Dialog>
149        {/* The composer UI */}
150        <Composer.Frame>
151          <Composer.Input placeholder="Add a message, if you'd like." />
152          <Composer.Footer>
153            <Composer.Formatting />
154            <Composer.Emojis />
155          </Composer.Footer>
156        </Composer.Frame>
157 
158        {/* Custom UI OUTSIDE the composer, but INSIDE the provider */}
159        <MessagePreview />
160 
161        {/* Actions at the bottom of the dialog */}
162        <DialogActions>
163          <CancelButton />
164          <ForwardButton />
165        </DialogActions>
166      </Dialog>
167    </ForwardMessageProvider>
168  )
169}
170 
171// This button lives OUTSIDE Composer.Frame but can still submit based on its context!
172function ForwardButton() {
173  const {
174    actions: { submit },
175  } = use(ComposerContext)
176  return <Button onPress={submit}>Forward</Button>
177}
178 
179// This preview lives OUTSIDE Composer.Frame but can read composer's state!
180function MessagePreview() {
181  const { state } = use(ComposerContext)
182  return <Preview message={state.input} attachments={state.attachments} />
183}
184```
185 
186The `ForwardButton` and `MessagePreview` are not visually inside the composer
187box, but they can still access its state and actions. This is the power of
188lifting state into providers.
189 
190The UI is reusable bits you compose together. The state is dependency-injected
191by the provider. Swap the provider, keep the UI.
192