chore: rename ctx to cx

examples/listener.rs

@@ -4,10 +4,10 @@ use dioxus_core::prelude::*;
 
 fn main() {}
 
-static Example: FC<()> = |ctx| {
-    let (name, set_name) = use_state(&ctx, || "...?");
+static Example: FC<()> = |cx| {
+    let (name, set_name) = use_state(&cx, || "...?");
 
-    ctx.render(rsx!(
+    cx.render(rsx!(
         div {
             h1 { "Hello, {name}" }
             // look ma - we can rsx! and html! together
@@ -17,8 +17,8 @@ static Example: FC<()> = |ctx| {
 };
 
 pub fn render<'src, 'a, F: for<'b> FnOnce(&'b NodeCtx<'src>) -> VNode<'src> + 'src + 'a, P>(
-    ctx: &'a Context<'src, P>,
+    cx: &'a Context<'src, P>,
     lazy_nodes: LazyNodes<'src, F>,
 ) -> VNode<'src> {
-    ctx.render(lazy_nodes)
+    cx.render(lazy_nodes)
 }

examples/reducer.rs

@@ -7,12 +7,12 @@
 fn main() {}
 use dioxus::prelude::*;
 
-pub static ExampleReducer: FC<()> = |ctx| {
-    let (state, reduce) = use_reducer(&ctx, PlayerState::new, PlayerState::reduce);
+pub static ExampleReducer: FC<()> = |cx| {
+    let (state, reduce) = use_reducer(&cx, PlayerState::new, PlayerState::reduce);
 
     let is_playing = state.is_playing();
 
-    ctx.render(rsx! {
+    cx.render(rsx! {
         div {
             h1 {"Select an option"}
             h3 {"The radio is... {is_playing}!"}

examples/rsx_usage.rs

@@ -190,7 +190,7 @@ pub struct TallerProps {
 }
 
 /// This component is taller than most :)
-pub fn Taller(ctx: Context<TallerProps>) -> VNode {
+pub fn Taller(cx: Context<TallerProps>) -> VNode {
     let b = true;
     todo!()
 }

examples/suspense.rs

@@ -0,0 +1,52 @@
+//! Example: Suspense
+//! -----------------
+//! This example shows how the "use_fetch" hook is built on top of Dioxus' "suspense" API. Suspense enables components
+//! to wait on futures to complete before rendering the result into VNodes. These VNodes are immediately available in a
+//! "suspended" fashion and will automatically propogate to the UI when the future completes.
+//!
+//! Note that if your component updates or receives new props while it is awating the result, the future will be dropped
+//! and all work will stop. In this example, we store the future in a hook so we can always resume it.
+
+use dioxus::prelude::*;
+
+fn main() {}
+
+#[derive(serde::Deserialize)]
+struct DogApi {
+    message: String,
+}
+const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random";
+
+pub static App: FC<()> = |cx| {
+    let doggo = use_fetch(&cx, ENDPOINT, |cx, res: surf::Result<DogApi>| match res {
+        Ok(res) => rsx!(in cx, img { src: "{res.message}"}),
+        Err(_) => rsx!(in cx, p { "Failed to load doggo :("}),
+    });
+
+    cx.render(rsx!(
+        div {
+            h1 {"Waiting for a doggo..."}
+            {doggo}
+        }
+    ))
+};
+
+fn use_fetch<'a, T: serde::de::DeserializeOwned + 'static>(
+    cx: &impl Scoped<'a>,
+    url: &str,
+    g: impl FnOnce(dioxus_core::virtual_dom::SuspendedContext, surf::Result<T>) -> VNode<'a> + 'a,
+) -> VNode<'a> {
+    use futures::Future;
+    use futures::FutureExt;
+    use std::pin::Pin;
+
+    // essentially we're doing a "use_effect" but with no dependent props
+    let doggo_promise: &'a mut Pin<Box<dyn Future<Output = surf::Result<T>> + Send + 'static>> = cx
+        .use_hook(
+            move || surf::get(url).recv_json::<T>().boxed(),
+            // just pass the future through
+            |p| p,
+            |_| (),
+        );
+    cx.suspend(doggo_promise, g)
+}