Skip to content

Commit a26bf41

Browse files
mcmah309mcmah309
committed
doc: Add cheat sheet
1 parent c208c57 commit a26bf41

File tree

4 files changed

+288
-0
lines changed

4 files changed

+288
-0
lines changed

‎docs-src/0.6/src/SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
- [Resource](reference/use_resource.md)
9494
- [UseCoroutine](reference/use_coroutine.md)
9595
- [Spawn](reference/spawn.md)
96+
- [Cheat Sheet](reference/cheat_sheet.md)
9697

9798
---
9899
- [Contributing](contributing/index.md)

‎docs-src/0.6/src/reference/cheat_sheet.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# State and Hooks Cheat Sheet
2+
3+
![State And Hooks Cheat Sheet](/assets/06_docs/state_and_hooks_cheat_sheet.svg)
4+
5+
<!-- flowchart TD
6+
A("**Start**<br/>Which scope does your state or utility belong to?")
7+
8+
A --> B["Local<br/>(per component)"]
9+
A --> C["Shared<br/>(Context)"]
10+
A --> D["Persistent<br/>(Storage)"]
11+
A --> E["Global<br/>(Truly app-wide)"]
12+
A --> F["Route-based"]
13+
14+
B --> LH("When does the code need to run?")
15+
16+
LH --> Init["First Render (Non-Reactive)"]
17+
LH --> BeforeRender["Before Every<br/>Subsequent Render"]
18+
LH --> Render["Render Phase (While Component Is Alive)"]
19+
LH --> Post["Post Renders"]
20+
LH --> Clean["Cleanup"]
21+
22+
%% First Render
23+
subgraph FR_Sync ["Sync"]
24+
L14["**use_hook**<br/>Run on the first use of the hook, which is typically the initial render"]
25+
L16["**use_hook_with_cleanup**<br/>Use a hook with a cleanup function that runs when component is dropped"]
26+
U1["**use_debounce**<br/>Calls a function only after provided duration has passed (dioxus_sdk)"]
27+
U2["**use_interval**<br/>Repeatedly calls a function every certain period (dioxus_sdk)"]
28+
L18["**use_server_cached**<br/>Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client"]
29+
end
30+
31+
subgraph FR_Async ["Async"]
32+
U3["**use_channel/use_listen_channel**<br/>Create and listen to channels for communication between components (dioxus_sdk)"]
33+
end
34+
35+
Init --> FR_Sync
36+
Init --> FR_Async
37+
38+
%% Before Every Render
39+
subgraph BR_Sync ["Sync"]
40+
L19["**use_before_render**<br/>Register a function to run before every subsequent render"]
41+
end
42+
43+
BeforeRender --> BR_Sync
44+
45+
%% Render phase
46+
subgraph RP_Sync ["Sync"]
47+
L7["**use_callback**<br/>Keeps a callback up to date for all references to the handle"]
48+
L1["**use_signal**<br/>Basic local state, triggers re-renders on write, does not subscribe to other signals"]
49+
L1b["**use_signal_sync**<br/>Thread-safe signal - Send + Sync"]
50+
L3["**use_memo**<br/>Derived state (memoized), composes signals"]
51+
L10["**use_set_compare/use_set_compare_equal**<br/>Efficient value change tracking"]
52+
end
53+
54+
subgraph RP_Both ["Sync & Async"]
55+
L8["**use_reactive**<br/>Creates a closure (async/sync) to track 'non-reactive' data"]
56+
end
57+
58+
subgraph RP_Async ["Async"]
59+
L5["**use_future**<br/>Run an async task once"]
60+
L6["**use_coroutine**<br/>Stream-based concurrency through channels"]
61+
L4["**use_resource**<br/>Async derived state"]
62+
L15["**use_server_future**<br/>Async derived state that runs on the server and caches on the client"]
63+
end
64+
65+
Render --> RP_Sync
66+
Render --> RP_Both
67+
Render --> RP_Async
68+
69+
%% Post render
70+
subgraph PR_Sync ["Sync"]
71+
L2["**use_effect**<br/>Side effects after render, composes signals"]
72+
L9["**use_hook_did_run**<br/>Lifecycle check if this hook has been called on the latest render"]
73+
L17["**use_after_render**<br/>Push a function to be run after the next render"]
74+
end
75+
76+
Post --> PR_Sync
77+
78+
%% Cleanup
79+
subgraph CL_Sync ["Sync"]
80+
L13["**use_drop**<br/>Callback invoked when component is dropped"]
81+
end
82+
83+
Clean --> CL_Sync
84+
85+
%% Context
86+
subgraph CT_Sync ["Sync"]
87+
C1["**use_context_provider**<br/>Provides data to any child"]
88+
C2["**use_context**<br/>Consume provided data"]
89+
C3["**try_use_context**<br/>Like use_context but returns None if missing"]
90+
C4["**use_root_context**<br/>Like use_context except creates context at root if missing"]
91+
C5["**use_coroutine_handle**<br/>Obtain handle to a context-provided coroutine"]
92+
93+
subgraph CT_Utils ["Utils"]
94+
C6["**use_clipboard**<br/>Access the clipboard (dioxus_sdk)"]
95+
C7["**use_window_size**<br/>Initial window size will be returned with this hook and updated continously as the window is resized (dioxus_sdk)"]
96+
C8["**use_geolocation**<br/>Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk)"]
97+
C9["**use_system_theme**<br/>Initial theme will be returned and updated if the system theme changes (dioxus_sdk)"]
98+
end
99+
end
100+
101+
C --> CT_Sync
102+
103+
%% Persistent
104+
subgraph PS_Sync ["Sync"]
105+
P1["**use_persistent**<br/>Store data across application reloads as either local storage or a file storage (dioxus_sdk)"]
106+
P2["**use_storage**<br/>Like use_persistent except the storage location is generic, which may be useful for custom implementations (dioxus_sdk)"]
107+
P3["**use_synced_storage**<br/>Store data that persists and syncs across all app sessions (dioxus_sdk)"]
108+
P4["**use_singleton_persistent**<br/>Persistent storage shared for calls from same line (dioxus_sdk)"]
109+
P5["**use_storage_entry**<br/>Creates a StorageEntry with latest value from storage or init if does not exist (dioxus_sdk)"]
110+
P6["**use_synced_storage_entry**<br/>Creates a StorageEntry with updates subscription (dioxus_sdk)"]
111+
end
112+
113+
D --> PS_Sync
114+
115+
%% Global
116+
subgraph GB_Sync ["Sync"]
117+
G1["**GlobalSignal**<br/>Global signal (sync)"]
118+
G2["**GlobalMemo**<br/>Derived global state (sync)"]
119+
G3["**Global<T>**<br/>A lazy value that is created once per application (sync)"]
120+
end
121+
122+
E --> GB_Sync
123+
124+
%% Route
125+
subgraph RT_Sync ["Sync"]
126+
R3["**Routable**<br/>The dioxus-router macro used for routing"]
127+
128+
subgraph RT_Utils ["Utils"]
129+
R1["**use_route**<br/>Access information about the current routing location"]
130+
R2["**use_navigator**<br/>Access navigator to change router history"]
131+
R4["**use_outlet_context**<br/>Access to the outlet context for the route nesting level"]
132+
end
133+
end
134+
135+
F --> RT_Sync
136+
137+
%% Legend
138+
subgraph Legend ["Legend"]
139+
L_HIGHLIGHT["Frequently Used"]
140+
L_NORMAL["Standard"]
141+
end
142+
143+
%% Styling
144+
classDef frequentlyUsed fill:#ff9,stroke:#333,stroke-width:2px
145+
class L_HIGHLIGHT,L1,L2,L3,L4,L5,L8,L14,C1,C2,R1,R2,R3,P1 frequentlyUsed -->

‎docs-src/0.6/src/reference/cheat_sheet.txt‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
flowchart TD
2+
A("**Start**<br/>Which scope does your state or utility belong to?")
3+
4+
A --> B["Local<br/>(per component)"]
5+
A --> C["Shared<br/>(Context)"]
6+
A --> D["Persistent<br/>(Storage)"]
7+
A --> E["Global<br/>(Truly app-wide)"]
8+
A --> F["Route-based"]
9+
10+
B --> LH("When does the code need to run?")
11+
12+
LH --> Init["First Render (Non-Reactive)"]
13+
LH --> BeforeRender["Before Every<br/>Subsequent Render"]
14+
LH --> Render["Render Phase (While Component Is Alive)"]
15+
LH --> Post["Post Renders"]
16+
LH --> Clean["Cleanup"]
17+
18+
%% First Render
19+
subgraph FR_Sync ["Sync"]
20+
L14["**use_hook**<br/>Run on the first use of the hook, which is typically the initial render"]
21+
L16["**use_hook_with_cleanup**<br/>Use a hook with a cleanup function that runs when component is dropped"]
22+
U1["**use_debounce**<br/>Calls a function only after provided duration has passed (dioxus_sdk)"]
23+
U2["**use_interval**<br/>Repeatedly calls a function every certain period (dioxus_sdk)"]
24+
L18["**use_server_cached**<br/>Runs a function on the server (or client if server is not enabled) and sends result to client. Caches the value on the client"]
25+
end
26+
27+
subgraph FR_Async ["Async"]
28+
U3["**use_channel/use_listen_channel**<br/>Create and listen to channels for communication between components (dioxus_sdk)"]
29+
end
30+
31+
Init --> FR_Sync
32+
Init --> FR_Async
33+
34+
%% Before Every Render
35+
subgraph BR_Sync ["Sync"]
36+
L19["**use_before_render**<br/>Register a function to run before every subsequent render"]
37+
end
38+
39+
BeforeRender --> BR_Sync
40+
41+
%% Render phase
42+
subgraph RP_Sync ["Sync"]
43+
L7["**use_callback**<br/>Keeps a callback up to date for all references to the handle"]
44+
L1["**use_signal**<br/>Basic local state, triggers re-renders on write, does not subscribe to other signals"]
45+
L1b["**use_signal_sync**<br/>Thread-safe signal - Send + Sync"]
46+
L3["**use_memo**<br/>Derived state (memoized), composes signals"]
47+
L10["**use_set_compare/use_set_compare_equal**<br/>Efficient value change tracking"]
48+
end
49+
50+
subgraph RP_Both ["Sync & Async"]
51+
L8["**use_reactive**<br/>Creates a closure (async/sync) to track 'non-reactive' data"]
52+
end
53+
54+
subgraph RP_Async ["Async"]
55+
L5["**use_future**<br/>Run an async task once"]
56+
L6["**use_coroutine**<br/>Stream-based concurrency through channels"]
57+
L4["**use_resource**<br/>Async derived state"]
58+
L15["**use_server_future**<br/>Async derived state that runs on the server and caches on the client"]
59+
end
60+
61+
Render --> RP_Sync
62+
Render --> RP_Both
63+
Render --> RP_Async
64+
65+
%% Post render
66+
subgraph PR_Sync ["Sync"]
67+
L2["**use_effect**<br/>Side effects after render, composes signals"]
68+
L9["**use_hook_did_run**<br/>Lifecycle check if this hook has been called on the latest render"]
69+
L17["**use_after_render**<br/>Push a function to be run after the next render"]
70+
end
71+
72+
Post --> PR_Sync
73+
74+
%% Cleanup
75+
subgraph CL_Sync ["Sync"]
76+
L13["**use_drop**<br/>Callback invoked when component is dropped"]
77+
end
78+
79+
Clean --> CL_Sync
80+
81+
%% Context
82+
subgraph CT_Sync ["Sync"]
83+
C1["**use_context_provider**<br/>Provides data to any child"]
84+
C2["**use_context**<br/>Consume provided data"]
85+
C3["**try_use_context**<br/>Like use_context but returns None if missing"]
86+
C4["**use_root_context**<br/>Like use_context except creates context at root if missing"]
87+
C5["**use_coroutine_handle**<br/>Obtain handle to a context-provided coroutine"]
88+
89+
subgraph CT_Utils ["Utils"]
90+
C6["**use_clipboard**<br/>Access the clipboard (dioxus_sdk)"]
91+
C7["**use_window_size**<br/>Initial window size will be returned with this hook and updated continously as the window is resized (dioxus_sdk)"]
92+
C8["**use_geolocation**<br/>Provides the latest geocoordinates. Good for navigation-type apps (dioxus_sdk)"]
93+
C9["**use_system_theme**<br/>Initial theme will be returned and updated if the system theme changes (dioxus_sdk)"]
94+
end
95+
end
96+
97+
C --> CT_Sync
98+
99+
%% Persistent
100+
subgraph PS_Sync ["Sync"]
101+
P1["**use_persistent**<br/>Store data across application reloads as either local storage or a file storage (dioxus_sdk)"]
102+
P2["**use_storage**<br/>Like use_persistent except the storage location is generic, which may be useful for custom implementations (dioxus_sdk)"]
103+
P3["**use_synced_storage**<br/>Store data that persists and syncs across all app sessions (dioxus_sdk)"]
104+
P4["**use_singleton_persistent**<br/>Persistent storage shared for calls from same line (dioxus_sdk)"]
105+
P5["**use_storage_entry**<br/>Creates a StorageEntry with latest value from storage or init if does not exist (dioxus_sdk)"]
106+
P6["**use_synced_storage_entry**<br/>Creates a StorageEntry with updates subscription (dioxus_sdk)"]
107+
end
108+
109+
D --> PS_Sync
110+
111+
%% Global
112+
subgraph GB_Sync ["Sync"]
113+
G1["**GlobalSignal**<br/>Global signal (sync)"]
114+
G2["**GlobalMemo**<br/>Derived global state (sync)"]
115+
G3["**Global<T>**<br/>A lazy value that is created once per application (sync)"]
116+
end
117+
118+
E --> GB_Sync
119+
120+
%% Route
121+
subgraph RT_Sync ["Sync"]
122+
R3["**Routable**<br/>The dioxus-router macro used for routing"]
123+
124+
subgraph RT_Utils ["Utils"]
125+
R1["**use_route**<br/>Access information about the current routing location"]
126+
R2["**use_navigator**<br/>Access navigator to change router history"]
127+
R4["**use_outlet_context**<br/>Access to the outlet context for the route nesting level"]
128+
end
129+
end
130+
131+
F --> RT_Sync
132+
133+
%% Legend
134+
subgraph Legend ["Legend"]
135+
L_HIGHLIGHT["Frequently Used"]
136+
L_NORMAL["Standard"]
137+
end
138+
139+
%% Styling
140+
classDef frequentlyUsed fill:#ff9,stroke:#333,stroke-width:2px
141+
class L_HIGHLIGHT,L1,L2,L3,L4,L5,L8,L14,C1,C2,R1,R2,R3,P1 frequentlyUsed

‎packages/docs-router/assets/06_docs/state_and_hooks_cheat_sheet.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)