1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
use crateCapturedError;
use crate::;
use Future;
use Rc;
use Arc;
/// Get the current scope id
/// Throw a [`CapturedError`] into the current scope. The error will bubble up to the nearest [`crate::ErrorBoundary()`] or the root of the app.
///
/// # Examples
/// ```rust, no_run
/// # use dioxus::prelude::*;
/// fn Component() -> Element {
/// let request = spawn(async move {
/// match reqwest::get("https://api.example.com").await {
/// Ok(_) => unimplemented!(),
/// // You can explicitly throw an error into a scope with throw_error
/// Err(err) => dioxus::core::throw_error(err),
/// }
/// });
///
/// unimplemented!()
/// }
/// ```
/// Try to consume context from the current scope, returning `None` if not found.
///
/// Unlike `use_context`, this is **not** a hook. It reads the context value directly from the
/// runtime each time it is called, rather than caching it on first render. This means it can be
/// called from anywhere the Dioxus runtime is active — inside event handlers, async tasks, spawned
/// futures, or other non-hook contexts — without following the rules of hooks.
/// Consume context from the current scope, panicking if not found.
///
/// Unlike `use_context`, this is **not** a hook. It reads the context value directly from the
/// runtime each time it is called, rather than caching it on first render. This means it can be
/// called from anywhere the Dioxus runtime is active — inside event handlers, async tasks, spawned
/// futures, or other non-hook contexts — without following the rules of hooks.
/// Consume context from the current scope
/// Check if the current scope has a context
/// Provide context to the current scope
/// Provide a context to the root scope
/// Suspended the current component on a specific task and then return None
/// Start a new future on the same thread as the rest of the VirtualDom.
///
/// **You should generally use `spawn` instead of this method unless you specifically need to run a task during suspense**
///
/// This future will not contribute to suspense resolving but it will run during suspense.
///
/// Because this future runs during suspense, you need to be careful to work with hydration. It is not recommended to do any async IO work in this future, as it can easily cause hydration issues. However, you can use isomorphic tasks to do work that can be consistently replicated on the server and client like logging or responding to state changes.
///
/// ```rust, no_run
/// # use dioxus::prelude::*;
/// # use dioxus_core::spawn_isomorphic;
/// // ❌ Do not do requests in isomorphic tasks. It may resolve at a different time on the server and client, causing hydration issues.
/// let mut state = use_signal(|| None);
/// spawn_isomorphic(async move {
/// state.set(Some(reqwest::get("https://api.example.com").await));
/// });
///
/// // ✅ You may wait for a signal to change and then log it
/// let mut state = use_signal(|| 0);
/// spawn_isomorphic(async move {
/// loop {
/// tokio::time::sleep(std::time::Duration::from_secs(1)).await;
/// println!("State is {state}");
/// }
/// });
/// ```
///
/// Spawns the future and returns the [`Task`]. This task will automatically be canceled when the component is dropped.
///
/// # Example
/// ```rust
/// use dioxus::prelude::*;
///
/// fn App() -> Element {
/// rsx! {
/// button {
/// onclick: move |_| {
/// spawn(async move {
/// tokio::time::sleep(std::time::Duration::from_secs(1)).await;
/// println!("Hello World");
/// });
/// },
/// "Print hello in one second"
/// }
/// }
/// }
/// ```
///
/// Queue an effect to run after the next render. You generally shouldn't need to interact with this function directly. [use_effect](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html) will call this function for you.
/// Spawn a future that Dioxus won't clean up when this component is unmounted
///
/// This is good for tasks that need to be run after the component has been dropped.
///
/// **This will run the task in the root scope. Any calls to global methods inside the future (including `context`) will be run in the root scope.**
///
/// # Example
///
/// ```rust
/// use dioxus::prelude::*;
/// use dioxus_core::spawn_forever;
///
/// // The parent component can create and destroy children dynamically
/// fn App() -> Element {
/// let mut count = use_signal(|| 0);
///
/// rsx! {
/// button {
/// onclick: move |_| count += 1,
/// "Increment"
/// }
/// button {
/// onclick: move |_| count -= 1,
/// "Decrement"
/// }
///
/// for id in 0..10 {
/// Child { id }
/// }
/// }
/// }
///
/// #[component]
/// fn Child(id: i32) -> Element {
/// rsx! {
/// button {
/// onclick: move |_| {
/// // This will spawn a task in the root scope that will run forever
/// // It will keep running even if you drop the child component by decreasing the count
/// spawn_forever(async move {
/// loop {
/// tokio::time::sleep(std::time::Duration::from_secs(1)).await;
/// println!("Running task spawned in child component {id}");
/// }
/// });
/// },
/// "Spawn background task"
/// }
/// }
/// }
/// ```
///
/// Informs the scheduler that this task is no longer needed and should be removed.
///
/// This drops the task immediately.
/// Store a value between renders. The foundational hook for all other hooks.
///
/// Accepts an `initializer` closure, which is run on the first use of the hook (typically the initial render).
/// `use_hook` will return a clone of the value on every render.
///
/// In order to clean up resources you would need to implement the [`Drop`] trait for an inner value stored in a RC or similar (Signals for instance),
/// as these only drop their inner value once all references have been dropped, which only happens when the component is dropped.
///
/// <div class="warning">
///
/// `use_hook` is not reactive. It just returns the value on every render. If you need state that will track changes, use [`use_signal`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_signal.html) instead.
///
/// ❌ Don't use `use_hook` with `Rc<RefCell<T>>` for state. It will not update the UI and other hooks when the state changes.
/// ```rust
/// use dioxus::prelude::*;
/// use std::rc::Rc;
/// use std::cell::RefCell;
///
/// pub fn Comp() -> Element {
/// let count = use_hook(|| Rc::new(RefCell::new(0)));
///
/// rsx! {
/// button {
/// onclick: move |_| *count.borrow_mut() += 1,
/// "{count.borrow()}"
/// }
/// }
/// }
/// ```
///
/// ✅ Use `use_signal` instead.
/// ```rust
/// use dioxus::prelude::*;
///
/// pub fn Comp() -> Element {
/// let mut count = use_signal(|| 0);
///
/// rsx! {
/// button {
/// onclick: move |_| count += 1,
/// "{count}"
/// }
/// }
/// }
/// ```
///
/// </div>
///
/// # Example
///
/// ```rust, no_run
/// use dioxus::prelude::*;
///
/// // prints a greeting on the initial render
/// pub fn use_hello_world() {
/// use_hook(|| println!("Hello, world!"));
/// }
/// ```
///
/// # Custom Hook Example
///
/// ```rust, no_run
/// use dioxus::prelude::*;
///
/// pub struct InnerCustomState(usize);
///
/// impl Drop for InnerCustomState {
/// fn drop(&mut self){
/// println!("Component has been dropped.");
/// }
/// }
///
/// #[derive(Clone, Copy)]
/// pub struct CustomState {
/// inner: Signal<InnerCustomState>
/// }
///
/// pub fn use_custom_state() -> CustomState {
/// use_hook(|| CustomState {
/// inner: Signal::new(InnerCustomState(0))
/// })
/// }
/// ```
/// Get the current render since the inception of this component.
///
/// This can be used as a helpful diagnostic when debugging hooks/renders, etc.
/// Get the parent of the current scope if it exists.
/// Mark the current scope as dirty, causing it to re-render.
/// Mark the current scope as dirty, causing it to re-render.
/// Schedule an update for the current component.
///
/// Note: Unlike [`needs_update`], the function returned by this method will work outside of the dioxus runtime.
///
/// Note: The function returned by this method will schedule an update for the current component even if it has already updated between when `schedule_update` was called and when the returned function is called.
/// If the desired behavior is to invalidate the current rendering of the current component (and no-op if already invalidated)
/// [`subscribe`](crate::reactive_context::ReactiveContext::subscribe) to the [`current`](crate::reactive_context::ReactiveContext::current) [`ReactiveContext`](crate::reactive_context::ReactiveContext) instead.
///
/// You should prefer [`schedule_update_any`] if you need to update multiple components.
/// Schedule an update for any component given its [`ScopeId`].
///
/// A component's [`ScopeId`] can be obtained from the [`current_scope_id`] method.
///
/// Note: Unlike [`needs_update`], the function returned by this method will work outside of the dioxus runtime.
///
/// Note: It does not matter when `schedule_update_any` is called: the returned function will invalidate what ever generation of the specified component is current when returned function is called.
/// If the desired behavior is to schedule invalidation of the current rendering of a component, use [`ReactiveContext`](crate::reactive_context::ReactiveContext) instead.
/// Creates a callback that will be run before the component is removed.
/// This can be used to clean up side effects from the component
/// (created with [`use_effect`](https://docs.rs/dioxus-hooks/latest/dioxus_hooks/fn.use_effect.html)).
///
/// Note:
/// Effects do not run on the server, but use_drop **DOES**. It runs any time the component is dropped including during SSR rendering on the server. If your clean up logic targets web, the logic has to be gated by a feature, see the below example for details.
///
/// Example:
/// ```rust
/// use dioxus::prelude::*;
/// use dioxus_core::use_drop;
///
/// fn app() -> Element {
/// let mut state = use_signal(|| true);
/// rsx! {
/// for _ in 0..100 {
/// h1 {
/// "spacer"
/// }
/// }
/// if state() {
/// child_component {}
/// }
/// button {
/// onclick: move |_| {
/// state.toggle()
/// },
/// "Unmount element"
/// }
/// }
/// }
///
/// fn child_component() -> Element {
/// let mut original_scroll_position = use_signal(|| 0.0);
///
/// use_effect(move || {
/// let window = web_sys::window().unwrap();
/// let document = window.document().unwrap();
/// let element = document.get_element_by_id("my_element").unwrap();
/// element.scroll_into_view();
/// original_scroll_position.set(window.scroll_y().unwrap());
/// });
///
/// use_drop(move || {
/// // This only make sense to web and hence the `web!` macro
/// web! {
/// /// restore scroll to the top of the page
/// let window = web_sys::window().unwrap();
/// window.scroll_with_x_and_y(original_scroll_position(), 0.0);
/// }
/// });
///
/// rsx! {
/// div {
/// id: "my_element",
/// "hello"
/// }
/// }
/// }
/// ```
/// A hook that allows you to insert a "before render" function.
///
/// This function will always be called before dioxus tries to render your component. This should be used for safely handling
/// early returns
/// Push this function to be run after the next render
///
/// This function will always be called before dioxus tries to render your component. This should be used for safely handling
/// early returns
/// Use a hook with a cleanup function