struxadotcloud/struxa

public

initial commitd4cb9e15 months ago125 lines · 3.2 KB

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