1---
2title: Decouple State Management from UI
3impact: MEDIUM
4impactDescription: enables swapping state implementations without changing UI
5tags: composition, state, architecture
6---
7 
8## Decouple State Management from UI
9 
10The provider component should be the only place that knows how state is managed.
11UI components consume the context interface—they don't know if state comes from
12useState, Zustand, or a server sync.
13 
14**Incorrect (UI coupled to state implementation):**
15 
16```tsx
17function ChannelComposer({ channelId }: { channelId: string }) {
18  // UI component knows about global state implementation
19  const state = useGlobalChannelState(channelId)
20  const { submit, updateInput } = useChannelSync(channelId)
21 
22  return (
23    <Composer.Frame>
24      <Composer.Input
25        value={state.input}
26        onChange={(text) => sync.updateInput(text)}
27      />
28      <Composer.Submit onPress={() => sync.submit()} />
29    </Composer.Frame>
30  )
31}
32```
33 
34**Correct (state management isolated in provider):**
35 
36```tsx
37// Provider handles all state management details
38function ChannelProvider({
39  channelId,
40  children,
41}: {
42  channelId: string
43  children: React.ReactNode
44}) {
45  const { state, update, submit } = useGlobalChannel(channelId)
46  const inputRef = useRef(null)
47 
48  return (
49    <Composer.Provider
50      state={state}
51      actions={{ update, submit }}
52      meta={{ inputRef }}
53    >
54      {children}
55    </Composer.Provider>
56  )
57}
58 
59// UI component only knows about the context interface
60function ChannelComposer() {
61  return (
62    <Composer.Frame>
63      <Composer.Header />
64      <Composer.Input />
65      <Composer.Footer>
66        <Composer.Submit />
67      </Composer.Footer>
68    </Composer.Frame>
69  )
70}
71 
72// Usage
73function Channel({ channelId }: { channelId: string }) {
74  return (
75    <ChannelProvider channelId={channelId}>
76      <ChannelComposer />
77    </ChannelProvider>
78  )
79}
80```
81 
82**Different providers, same UI:**
83 
84```tsx
85// Local state for ephemeral forms
86function ForwardMessageProvider({ children }) {
87  const [state, setState] = useState(initialState)
88  const forwardMessage = useForwardMessage()
89 
90  return (
91    <Composer.Provider
92      state={state}
93      actions={{ update: setState, submit: forwardMessage }}
94    >
95      {children}
96    </Composer.Provider>
97  )
98}
99 
100// Global synced state for channels
101function ChannelProvider({ channelId, children }) {
102  const { state, update, submit } = useGlobalChannel(channelId)
103 
104  return (
105    <Composer.Provider state={state} actions={{ update, submit }}>
106      {children}
107    </Composer.Provider>
108  )
109}
110```
111 
112The same `Composer.Input` component works with both providers because it only
113depends on the context interface, not the implementation.
114