remove cx.render

examples/PWA-example/src/main.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! (
+    rsx! (
         div {
             style: "text-align: center;",
             h1 { "🌗 Dioxus 🚀" }

examples/all_css.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             align_content: "a",
             align_items: "a",
@@ -409,5 +409,5 @@ fn app() -> Element {
 
             "This example isn't quite useful yet"
         }
-    })
+    }
 }

examples/all_events.rs

@@ -41,7 +41,7 @@ const RECT_STYLE: &str = r#"
     "#;
 
 fn app() -> Element {
-    let events = use_ref(std::collections::VecDeque::new);
+    let events = use_signal(std::collections::VecDeque::new);
 
     let log_event = move |event: Event| {
         let mut events = events.write();
@@ -52,7 +52,7 @@ fn app() -> Element {
         events.push_back(event);
     };
 
-    cx.render(rsx! (
+    rsx! {
         div { style: "{CONTAINER_STYLE}",
             div {
                 style: "{RECT_STYLE}",
@@ -82,5 +82,5 @@ fn app() -> Element {
                 }
             }
         }
-    ))
+    }
 }

examples/calculator.rs

@@ -19,7 +19,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    let val = use_state(|| String::from("0"));
+    let val = use_signal(|| String::from("0"));
 
     let input_digit = move |num: u8| {
         if val.get() == "0" {
@@ -57,7 +57,7 @@ fn app() -> Element {
         _ => {}
     };
 
-    cx.render(rsx!(
+    rsx! {
         style { {include_str!("./assets/calculator.css")} }
         div { id: "wrapper",
             div { class: "app",
@@ -128,8 +128,7 @@ fn app() -> Element {
                 }
             }
         }
-
-    ))
+    }
 }
 
 fn calc_val(val: &str) -> f64 {

examples/callback.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    let login = use_callback!(move |_| async move {
+    let onclick = use_callback!(move |_| async move {
         let res = reqwest::get("https://dog.ceo/api/breeds/list/all")
             .await
             .unwrap()
@@ -16,7 +16,7 @@ fn app() -> Element {
         println!("{res:#?}, ");
     });
 
-    cx.render(rsx! {
-        button { onclick: login, "Click me!" }
-    })
+    rsx! {
+        button { onclick, "Click me!" }
+    }
 }

examples/clock.rs

@@ -8,7 +8,7 @@ fn main() {
 fn app() -> Element {
     let mut count = use_signal(|| 0);
 
-    use_future!(|| async move {
+    use_future(|| async move {
         loop {
             tokio::time::sleep(std::time::Duration::from_millis(10)).await;
             count += 1;
@@ -16,7 +16,7 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         div { "High-Five counter: {count}" }
-    })
+    }
 }

examples/compose.rs

@@ -8,7 +8,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    let emails_sent = use_ref(Vec::new);
+    let emails_sent = use_signal(Vec::new);
 
     let tx = use_coroutine(|mut rx: UnboundedReceiver<String>| {
         to_owned![emails_sent];
@@ -19,7 +19,7 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 { "This is your email" }
 
@@ -40,7 +40,7 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 struct ComposeProps {
@@ -48,9 +48,9 @@ struct ComposeProps {
 }
 
 fn compose(cx: Scope<ComposeProps>) -> Element {
-    let user_input = use_state(String::new);
+    let user_input = use_signal(String::new);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 { "Compose a new email" }
 
@@ -64,5 +64,5 @@ fn compose(cx: Scope<ComposeProps>) -> Element {
 
             input { oninput: move |e| user_input.set(e.value()), value: "{user_input}" }
         }
-    })
+    }
 }

examples/control_focus.rs

@@ -7,10 +7,10 @@ fn main() {
 }
 
 fn app() -> Element {
-    let elements: &UseRef<Vec<Rc<MountedData>>> = use_ref(Vec::new);
-    let running = use_state(|| true);
+    let elements = use_signal(Vec::<Rc<MountedData>>::new);
+    let running = use_signal(|| true);
 
-    use_future!(|(elements, running)| async move {
+    use_future(|| async move {
         let mut focused = 0;
         if *running.current() {
             loop {
@@ -25,7 +25,7 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx!(
+    rsx! {
         div {
             h1 { "Input Roulette" }
             for i in 0..100 {
@@ -40,5 +40,5 @@ fn app() -> Element {
                 }
             }
         }
-    ))
+    }
 }

examples/counter.rs

@@ -8,7 +8,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    let counters = use_state(|| vec![0, 0, 0]);
+    let counters = use_signal(|| vec![0, 0, 0]);
     let sum: usize = counters.iter().copied().sum();
 
     render! {

examples/crm.rs

@@ -27,7 +27,7 @@ pub struct Client {
 type ClientContext = Vec<Client>;
 
 #[component]
-fn App() -> Element {
+fn App(props: ()) -> Element {
     use_shared_state_provider::<ClientContext>(Default::default);
 
     render! {
@@ -56,7 +56,7 @@ fn App() -> Element {
 fn ClientList() -> Element {
     let clients = use_shared_state::<ClientContext>().unwrap();
 
-    cx.render(rsx! {
+    rsx! {
         h2 { "List of Clients" }
 
         Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" }
@@ -71,17 +71,17 @@ fn ClientList() -> Element {
                 p { "Description: {client.description}" }
             }
         }
-    })
+    }
 }
 
 #[component]
-fn ClientAdd() -> Element {
+fn ClientAdd(props: ()) -> Element {
     let clients = use_shared_state::<ClientContext>().unwrap();
-    let first_name = use_state(String::new);
-    let last_name = use_state(String::new);
-    let description = use_state(String::new);
+    let first_name = use_signal(String::new);
+    let last_name = use_signal(String::new);
+    let description = use_signal(String::new);
 
-    cx.render(rsx! {
+    rsx! {
         h2 { "Add new Client" }
 
         form {
@@ -138,14 +138,14 @@ fn ClientAdd() -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 #[component]
-fn Settings() -> Element {
+fn Settings(props: ()) -> Element {
     let clients = use_shared_state::<ClientContext>().unwrap();
 
-    cx.render(rsx! {
+    rsx! {
         h2 { "Settings" }
 
         button {
@@ -158,5 +158,5 @@ fn Settings() -> Element {
         }
 
         Link { to: Route::ClientList {}, class: "pure-button", "Go back" }
-    })
+    }
 }

examples/custom_assets.rs

@@ -5,12 +5,12 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             p {
                 "This should show an image:"
             }
             img { src: manganis::mg!(image("examples/assets/logo.png").format(ImageType::Avif)).to_string() }
         }
-    })
+    }
 }

examples/custom_html.rs

@@ -32,9 +32,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 {"hello world!"}
         }
-    })
+    }
 }

examples/disabled.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let disabled = use_state(|| false);
+    let disabled = use_signal(|| false);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             button {
                 onclick: move |_| disabled.set(!disabled),
@@ -21,5 +21,5 @@ fn app() -> Element {
                 "lower button"
             }
         }
-    })
+    }
 }

examples/dog_app.rs

@@ -11,10 +11,10 @@ struct ListBreeds {
 }
 
 #[component]
-fn AppRoot(cx: Scope<'_>) -> Element {
-    let breed = use_state(|| "deerhound".to_string());
+fn AppRoot(_: ()) -> Element {
+    let breed = use_signal(|| "deerhound".to_string());
 
-    let breeds = use_future!(|| async move {
+    let breeds = use_future(|| async move {
         reqwest::get("https://dog.ceo/api/breeds/list/all")
             .await
             .unwrap()
@@ -23,7 +23,7 @@ fn AppRoot(cx: Scope<'_>) -> Element {
     });
 
     match breeds.value()? {
-        Ok(breed_list) => cx.render(rsx! {
+        Ok(breed_list) => rsx! {
             div { height: "500px",
                 h1 { "Select a dog breed!" }
                 div { display: "flex",
@@ -40,8 +40,8 @@ fn AppRoot(cx: Scope<'_>) -> Element {
                     div { flex: "50%", BreedPic { breed: breed.to_string() } }
                 }
             }
-        }),
-        Err(_e) => cx.render(rsx! { div { "Error fetching breeds" } }),
+        },
+        Err(_e) => rsx! { div { "Error fetching breeds" } },
     }
 }
 
@@ -52,7 +52,7 @@ struct DogApi {
 
 #[component]
 fn BreedPic(breed: String) -> Element {
-    let fut = use_future!(|breed| async move {
+    let fut = use_future(|breed| async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
             .await
             .unwrap()

examples/error_handle.rs

@@ -5,15 +5,13 @@ fn main() {
 }
 
 #[component]
-fn App() -> Element {
-    cx.render(rsx! {
+fn App(_: ()) -> Element {
+    rsx! {
         ErrorBoundary {
             handle_error: |error: CapturedError| rsx! {"Found error {error}"},
-            DemoC {
-                x: 1
-            }
+            DemoC { x: 1 }
         }
-    })
+    }
 }
 
 #[component]

examples/eval.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    let future = use_future((), |_| async move {
+    let future = use_future(|_| async move {
         let eval = eval(
             r#"
                 dioxus.send("Hi from JS!");
@@ -23,11 +23,11 @@ fn app() -> Element {
     });
 
     match future.value() {
-        Some(v) => cx.render(rsx!(
+        Some(v) => rsx!(
             p { "{v}" }
-        )),
-        _ => cx.render(rsx!(
+        ),
+        _ => rsx!(
             p { "hello" }
-        )),
+        ),
     }
 }

examples/fermi.rs

@@ -13,22 +13,22 @@ fn app() -> Element {
     use_init_atom_root(cx);
     let name = use_read(&NAME);
 
-    cx.render(rsx! {
+    rsx! {
         div { "hello {name}!" }
         Child {}
         ChildWithRef {}
-    })
+    }
 }
 
 fn Child() -> Element {
     let set_name = use_set(&NAME);
 
-    cx.render(rsx! {
+    rsx! {
         button {
             onclick: move |_| set_name("dioxus".to_string()),
             "reset name"
         }
-    })
+    }
 }
 
 static NAMES: AtomRef<Vec<String>> = AtomRef(|_| vec!["world".to_string()]);
@@ -36,7 +36,7 @@ static NAMES: AtomRef<Vec<String>> = AtomRef(|_| vec!["world".to_string()]);
 fn ChildWithRef() -> Element {
     let names = use_atom_ref(&NAMES);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             ul {
                 for name in names.read().iter() {
@@ -53,5 +53,5 @@ fn ChildWithRef() -> Element {
                 "Add name"
             }
         }
-    })
+    }
 }

examples/file_explorer.rs

@@ -21,9 +21,9 @@ fn main() {
 const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css"));
 
 fn app() -> Element {
-    let files = use_ref(Files::new);
+    let files = use_signal(Files::new);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
             header {
@@ -60,7 +60,7 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 struct Files {

examples/file_upload.rs

@@ -8,10 +8,10 @@ fn main() {
 }
 
 fn App() -> Element {
-    let enable_directory_upload = use_state(|| false);
-    let files_uploaded: &UseRef<Vec<String>> = use_ref(Vec::new);
+    let enable_directory_upload = use_signal(|| false);
+    let files_uploaded: Signal<Vec<String>> = use_signal(Vec::new);
 
-    cx.render(rsx! {
+    rsx! {
         label {
             input {
                 r#type: "checkbox",
@@ -70,5 +70,5 @@ fn App() -> Element {
                 li { "{file}" }
             }
         }
-    })
+    }
 }

examples/filedragdrop.rs

@@ -11,9 +11,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx!(
+    rsx!(
         div {
             h1 { "drag a file here and check your console" }
         }
-    ))
+    )
 }

examples/form.rs

@@ -10,7 +10,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 { "Form" }
             form {
@@ -24,5 +24,5 @@ fn app() -> Element {
                 button { r#type: "submit", value: "Submit", "Submit the form" }
             }
         }
-    })
+    }
 }

examples/framework_benchmark.rs

@@ -32,10 +32,10 @@ impl Label {
 }
 
 fn app() -> Element {
-    let items = use_ref(Vec::new);
-    let selected = use_state(|| None);
+    let items = use_signal(Vec::new);
+    let selected = use_signal(|| None);
 
-    cx.render(rsx! {
+    rsx! {
         div { class: "container",
             div { class: "jumbotron",
                 div { class: "row",
@@ -87,7 +87,7 @@ fn app() -> Element {
              }
             span { class: "preloadicon glyphicon glyphicon-remove", aria_hidden: "true" }
         }
-    })
+    }
 }
 
 #[derive(Props)]
@@ -98,7 +98,7 @@ struct ActionButtonProps<'a> {
 }
 
 fn ActionButton(props: ActionButtonProps) -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             class: "col-sm-6 smallpad",
             button {
@@ -110,7 +110,7 @@ fn ActionButton(props: ActionButtonProps) -> Element {
                 "{cx.props.name}"
             }
         }
-    })
+    }
 }
 
 static ADJECTIVES: &[&str] = &[

examples/heavy_compute.rs

@@ -22,7 +22,7 @@ fn app() -> Element {
         std::thread::sleep(std::time::Duration::from_millis(2_000));
     });
 
-    cx.render(rsx! {
+    rsx! {
         div { "Hello, world!" }
-    })
+    }
 }

examples/hydration.rs

@@ -21,9 +21,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let val = use_state(|| 0);
+    let val = use_signal(|| 0);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 { "hello world. Count: {val}" }
             button {
@@ -31,5 +31,5 @@ fn app() -> Element {
                 "click to increment"
             }
         }
-    })
+    }
 }

examples/inlineprops.rs

@@ -1,43 +0,0 @@
-//! Run with `cargo-expand` to see what each one expands to.
-//! This file is named `inlineprops.rs`, because there used to be a `#[inline_props]` macro to
-//! do this. However, it's now deprecated (and will likely be removed in a future major version),
-//! so please use `#[component]` instead!
-use dioxus::prelude::*;
-
-#[component]
-fn Thing1<T>(_a: T) -> Element {
-    cx.render(rsx! { "" })
-}
-
-#[component]
-fn Thing2(_a: u32) -> Element {
-    cx.render(rsx! { "" })
-}
-
-#[component]
-fn Thing3<'a, T>(cx: Scope<'a>, _a: &'a T) -> Element {
-    cx.render(rsx! { "" })
-}
-
-#[component]
-fn Thing4<'a>(cx: Scope<'a>, _a: &'a u32) -> Element {
-    cx.render(rsx! { "" })
-}
-
-fn main() {
-    dioxus_desktop::launch(App);
-}
-
-#[component]
-fn App() -> Element {
-    let state = use_state(|| 1);
-
-    cx.render(rsx! {
-        div {
-            Thing1 { _a: 1 },
-            Thing2 { _a: 1 },
-            Thing3 { _a: state },
-            Thing4 { _a: state },
-        }
-    })
-}

examples/inputs.rs

@@ -35,9 +35,9 @@ const FIELDS: &[(&str, &str)] = &[
 ];
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div { margin_left: "30px",
-            {select_example(cx)},
+            {select_example()},
             div {
                 // handling inputs on divs will catch all input events below
                 // so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe)
@@ -133,36 +133,35 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 fn select_example() -> Element {
-    cx.render(rsx! {
-    div {
-        select {
-            id: "selection",
-            name: "selection",
-            multiple: true,
-            oninput: move |evt| {
-                println!("{evt:?}");
-            },
-            option {
-                value : "Option 1",
-                label : "Option 1",
+    rsx! {
+        div {
+            select {
+                id: "selection",
+                name: "selection",
+                multiple: true,
+                oninput: move |evt| println!("{evt:?}"),
+                option {
+                    value: "Option 1",
+                    label: "Option 1",
+                }
+                option {
+                    value: "Option 2",
+                    label: "Option 2",
+                    selected: true,
+                },
+                option {
+                    value: "Option 3",
+                    label: "Option 3",
+                }
             }
-            option {
-                value : "Option 2",
-                label : "Option 2",
-                selected : true,
-            },
-            option {
-                value : "Option 3",
-                label : "Option 3",
+            label {
+                r#for: "selection",
+                "select element"
             }
         }
-        label {
-            r#for: "selection",
-            "select element"
-        }
-    }})
+    }
 }

examples/link.rs

@@ -7,7 +7,7 @@ fn main() {
 
 #[component]
 fn App() -> Element {
-    cx.render(rsx! (
+    rsx! (
         div {
             p {
                 a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" }
@@ -24,7 +24,7 @@ fn App() -> Element {
         div {
             Router::<Route> {}
         }
-    ))
+    )
 }
 
 #[derive(Routable, Clone)]

examples/login_form.rs

@@ -29,7 +29,7 @@ fn app() -> Element {
         }
     };
 
-    cx.render(rsx! {
+    rsx! {
         h1 { "Login" }
         form { onsubmit: onsubmit,
             input { r#type: "text", id: "username", name: "username" }
@@ -40,5 +40,5 @@ fn app() -> Element {
             br {}
             button { "Login" }
         }
-    })
+    }
 }

examples/multiwindow.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             button {
                 onclick: move |_| {
@@ -15,11 +15,11 @@ fn app() -> Element {
                 "New Window"
             }
         }
-    })
+    }
 }
 
 fn popup() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div { "This is a popup!" }
-    })
+    }
 }

examples/nested_listeners.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             onclick: move |_| println!("clicked! top"),
             "- div"
@@ -30,5 +30,5 @@ fn app() -> Element {
                 "Does not handle clicks - only propagate"
             }
         }
-    })
+    }
 }

examples/openid_connect_demo/src/views/header.rs

@@ -17,7 +17,7 @@ use openidconnect::{url::Url, OAuth2TokenResponse, TokenResponse};
 pub fn LogOut(cx: Scope<ClientProps>) -> Element {
     let fermi_auth_token = use_atom_ref(&FERMI_AUTH_TOKEN);
     let fermi_auth_token_read = fermi_auth_token.read().clone();
-    let log_out_url_state = use_state(|| None::<Option<Result<Url, crate::errors::Error>>>);
+    let log_out_url_state = use_signal(|| None::<Option<Result<Url, crate::errors::Error>>>);
     cx.render(match fermi_auth_token_read {
         Some(fermi_auth_token_read) => match fermi_auth_token_read.id_token.clone() {
             Some(id_token) => match log_out_url_state.get() {
@@ -129,7 +129,7 @@ pub fn RefreshToken(cx: Scope<ClientProps>) -> Element {
 
 #[component]
 pub fn LoadClient() -> Element {
-    let init_client_future = use_future((), |_| async move { init_oidc_client().await });
+    let init_client_future = use_future(|_| async move { init_oidc_client().await });
     let fermi_client: &UseAtomRef<ClientState> = use_atom_ref(&FERMI_CLIENT);
     cx.render(match init_client_future.value() {
         Some(client_props) => match client_props {

examples/optional_props.rs

@@ -11,7 +11,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         Button {
             a: "asd".to_string(),
             c: "asd".to_string(),
@@ -30,7 +30,7 @@ fn app() -> Element {
             c: "asd".to_string(),
             d: Some("asd".to_string()),
         }
-    })
+    }
 }
 
 type SthElse<T> = Option<T>;
@@ -52,7 +52,7 @@ struct ButtonProps {
 }
 
 fn Button(cx: Scope<ButtonProps>) -> Element {
-    cx.render(rsx! {
+    rsx! {
         button {
             "{cx.props.a} | "
             "{cx.props.b:?} | "
@@ -60,5 +60,5 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
             "{cx.props.d:?} | "
             "{cx.props.e:?}"
         }
-    })
+    }
 }

examples/overlay.rs

@@ -6,7 +6,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -22,7 +22,7 @@ fn app() -> Element {
 
             "This is an overlay!"
         }
-    })
+    }
 }
 
 fn make_config() -> dioxus_desktop::Config {

examples/pattern_model.rs

@@ -38,9 +38,9 @@ fn main() {
 const STYLE: &str = include_str!("./assets/calculator.css");
 
 fn app() -> Element {
-    let state = use_ref(Calculator::new);
+    let state = use_signal(Calculator::new);
 
-    cx.render(rsx! {
+    rsx! {
         style { {STYLE} }
         div { id: "wrapper",
             div { class: "app",
@@ -117,24 +117,25 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 #[derive(Props)]
 struct CalculatorKeyProps {
+    #[props(into)]
     name: String,
     onclick: EventHandler<MouseEvent>,
     children: Element,
 }
 
 fn CalculatorKey(props: CalculatorKeyProps) -> Element {
-    cx.render(rsx! {
+    rsx! {
         button {
             class: "calculator-key {cx.props.name}",
             onclick: move |e| cx.props.onclick.call(e),
             {&cx.props.children}
         }
-    })
+    }
 }
 
 struct Calculator {

examples/pattern_reducer.rs

@@ -15,9 +15,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let state = use_state(PlayerState::new);
+    let state = use_signal(PlayerState::new);
 
-    cx.render(rsx!(
+    rsx!(
         div {
             h1 {"Select an option"}
             h3 { "The radio is... ", {state.is_playing()}, "!" }
@@ -28,7 +28,7 @@ fn app() -> Element {
                 "Play"
             }
         }
-    ))
+    )
 }
 
 enum PlayerAction {

examples/read_size.rs

@@ -26,11 +26,11 @@ fn main() {
 }
 
 fn app() -> Element {
-    let div_element: &UseRef<Option<Rc<MountedData>>> = use_ref(|| None);
+    let div_element: Signal<Option<Rc<MountedData>>> = use_signal(|| None);
 
-    let dimentions = use_ref(Rect::zero);
+    let dimentions = use_signal(Rect::zero);
 
-    cx.render(rsx!(
+    rsx!(
         div {
             width: "50%",
             height: "50%",
@@ -56,5 +56,5 @@ fn app() -> Element {
             },
             "Read dimentions"
         }
-    ))
+    )
 }

examples/readme.rs

@@ -9,11 +9,11 @@ fn main() {
 }
 
 fn app() -> Element {
-    let mut count = use_state(|| 0);
+    let mut count = use_signal(|| 0);
 
-    cx.render(rsx! {
+    rsx! {
         h1 { "High-Five counter: {count}" }
         button { onclick: move |_| count += 1, "Up high!" }
         button { onclick: move |_| count -= 1, "Down low!" }
-    })
+    }
 }

examples/rsx_compile_fail.rs

@@ -13,14 +13,14 @@ fn main() {
 }
 
 fn example() -> Element {
-    let items = use_state(|| {
+    let items = use_signal(|| {
         vec![Thing {
             a: "asd".to_string(),
             b: 10,
         }]
     });
 
-    let things = use_ref(|| {
+    let things = use_signal(|| {
         vec![Thing {
             a: "asd".to_string(),
             b: 10,
@@ -28,10 +28,10 @@ fn example() -> Element {
     });
     let things_list = things.read();
 
-    let mything = use_ref(|| Some(String::from("asd")));
+    let mything = use_signal(|| Some(String::from("asd")));
     let mything_read = mything.read();
 
-    cx.render(rsx!(
+    rsx!(
         div {
             div { id: "asd",
                 "your neighborhood spiderman"

examples/rsx_usage.rs

@@ -54,7 +54,7 @@ fn App() -> Element {
     let formatting_tuple = ("a", "b");
     let lazy_fmt = format_args!("lazily formatted text");
     let asd = 123;
-    cx.render(rsx! {
+    rsx! {
         div {
             // Elements
             div {}
@@ -216,7 +216,7 @@ fn App() -> Element {
             // Or we can shell out to a helper function
             {format_dollars(10, 50)}
         }
-    })
+    }
 }
 
 fn format_dollars(dollars: u32, cents: u32) -> String {
@@ -224,9 +224,9 @@ fn format_dollars(dollars: u32, cents: u32) -> String {
 }
 
 fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element {
-    cx.render(rsx! {
+    rsx! {
         p { "{text}" }
-    })
+    }
 }
 
 // no_case_check disables PascalCase checking if you *really* want a snake_case component.
@@ -234,9 +234,9 @@ fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element {
 // something like Clippy.
 #[component(no_case_check)]
 fn lowercase_helper() -> Element {
-    cx.render(rsx! {
+    rsx! {
         "asd"
-    })
+    }
 }
 
 mod baller {
@@ -246,7 +246,7 @@ mod baller {
 
     #[component]
     /// This component totally balls
-    pub fn Baller(_cx: Scope<BallerProps>) -> Element {
+    pub fn Baller(props: BallerProps) -> Element {
         todo!()
     }
 
@@ -255,7 +255,7 @@ mod baller {
     // something like Clippy.
     #[component(no_case_check)]
     pub fn lowercase_component() -> Element {
-        cx.render(rsx! { "look ma, no uppercase" })
+        rsx! { "look ma, no uppercase" }
     }
 }
 
@@ -268,10 +268,10 @@ pub struct TallerProps<'a> {
 
 /// Documention for this component is visible within the rsx macro
 #[component]
-pub fn Taller(props: TallerProps -> Element {
-    cx.render(rsx! {
+pub fn Taller(props: TallerProps) -> Element {
+    rsx! {
         {&cx.props.children}
-    })
+    }
 }
 
 #[derive(Props, PartialEq, Eq)]
@@ -291,9 +291,9 @@ where
 
 #[component]
 fn WithInline<'a>(cx: Scope<'a>, text: &'a str) -> Element {
-    cx.render(rsx! {
+    rsx! {
         p { "{text}" }
-    })
+    }
 }
 
 #[component]
@@ -301,7 +301,7 @@ fn Label<T>(text: T) -> Element
 where
     T: Display,
 {
-    cx.render(rsx! {
+    rsx! {
         p { "{text}" }
-    })
+    }
 }

examples/scroll_to_top.rs

@@ -5,14 +5,12 @@ fn main() {
 }
 
 fn app() -> Element {
-    let header_element = use_ref(|| None);
+    let header_element = use_signal(|| None);
 
-    cx.render(rsx!(
+    rsx! {
         div {
             h1 {
-                onmounted: move |cx| {
-                    header_element.set(Some(cx.inner().clone()));
-                },
+                onmounted: move |cx| header_element.set(Some(cx.inner().clone())),
                 "Scroll to top example"
             }
 
@@ -21,15 +19,13 @@ fn app() -> Element {
             }
 
             button {
-                onclick: move |_| {
+                onclick: async move |_| move {
                     if let Some(header) = header_element.read().as_ref().cloned() {
-                        cx.spawn(async move {
-                            let _ = header.scroll_to(ScrollBehavior::Smooth).await;
-                        });
+                        let _ = header.scroll_to(ScrollBehavior::Smooth).await;
                     }
                 },
                 "Scroll to top"
             }
         }
-    ))
+    }
 }

examples/shortcut.rs

@@ -6,12 +6,12 @@ fn main() {
 }
 
 fn app() -> Element {
-    let toggled = use_state(|| false);
+    let toggled = use_signal(|| false);
 
     use_global_shortcut("ctrl+s", {
         to_owned![toggled];
         move || toggled.modify(|t| !*t)
     });
 
-    cx.render(rsx!("toggle: {toggled.get()}"))
+    rsx!("toggle: {toggled.get()}")
 }

examples/shorthand.rs

@@ -25,14 +25,7 @@ fn app() -> Element {
 }
 
 #[component]
-fn Component<'a>(
-    cx: Scope<'a>,
-    a: i32,
-    b: i32,
-    c: i32,
-    children: Element,
-    onclick: EventHandler<'a, ()>,
-) -> Element {
+fn Component(a: i32, b: i32, c: i32, children: Element, onclick: EventHandler<()>) -> Element {
     render! {
         div { "{a}" }
         div { "{b}" }

examples/signals.rs

@@ -12,7 +12,7 @@ fn app() -> Element {
 
     // Signals can be used in async functions without an explicit clone since they're 'static and Copy
     // Signals are backed by a runtime that is designed to deeply integrate with Dioxus apps
-    use_future!(|| async move {
+    use_future(|| async move {
         loop {
             if running.value() {
                 count += 1;
@@ -21,7 +21,7 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         h1 { "High-Five counter: {count}" }
         button { onclick: move |_| count += 1, "Up high!" }
         button { onclick: move |_| count -= 1, "Down low!" }
@@ -45,5 +45,5 @@ fn app() -> Element {
         } else {
             "No saved values"
         }
-    })
+    }
 }

examples/simple_list.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx!(
+    rsx!(
         div {
             // Use Map directly to lazily pull elements
             {(0..10).map(|f| rsx! { "{f}" })},
@@ -30,5 +30,5 @@ fn app() -> Element {
                 "hello world!"
             }
         }
-    ))
+    )
 }

examples/spread.rs

@@ -21,7 +21,7 @@ fn app() -> Element {
 }
 
 #[component]
-fn Component(props: Props -> Element {
+fn Component(props: Props) -> Element {
     render! {
         audio { ..cx.props.attributes, "1: {cx.props.extra_data}\n2: {cx.props.extra_data2}" }
     }

examples/ssr.rs

@@ -31,7 +31,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx!(
+    rsx!(
         div {
             h1 { "Title" }
             p { "Body" }

examples/streams.rs

@@ -10,7 +10,7 @@ fn main() {
 fn app() -> Element {
     let count = use_signal(|| 10);
 
-    use_future((), |_| async move {
+    use_future(|_| async move {
         let mut stream = some_stream();
 
         while let Some(second) = stream.next().await {
@@ -18,9 +18,9 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         h1 { "High-Five counter: {count}" }
-    })
+    }
 }
 
 fn some_stream() -> std::pin::Pin<Box<dyn Stream<Item = i32>>> {

examples/suspense.rs

@@ -32,7 +32,7 @@ struct DogApi {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 {"Dogs are very important"}
             p {
@@ -46,14 +46,14 @@ fn app() -> Element {
             h3 { "Illustrious Dog Photo" }
             Doggo { }
         }
-    })
+    }
 }
 
 /// This component will re-render when the future has finished
 /// Suspense is achieved my moving the future into only the component that
 /// actually renders the data.
 fn Doggo() -> Element {
-    let fut = use_future((), |_| async move {
+    let fut = use_future(|_| async move {
         reqwest::get("https://dog.ceo/api/breeds/image/random/")
             .await
             .unwrap()
@@ -77,5 +77,5 @@ fn Doggo() -> Element {
         },
         Some(Err(_)) => rsx! { div { "loading dogs failed" } },
         None => rsx! { div { "loading dogs..." } },
-    })
+    }
 }

examples/svg.rs

@@ -7,9 +7,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let val = use_state(|| 5);
+    let val = use_signal(|| 5);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             user_select: "none",
             webkit_user_select: "none",
@@ -31,7 +31,7 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 #[derive(Props)]
@@ -58,7 +58,7 @@ const UNHELD_COLOR: &str = "#ddd";
 
 // A six-sided die (D6) with dots.
 #[allow(non_snake_case)]
-pub fn Die(props: DieProps -> Element {
+pub fn Die(props: DieProps) -> Element {
     let &DieProps { value, keep, .. } = cx.props;
 
     let active_dots = &DOTS_FOR_VALUE[(value - 1) as usize];
@@ -81,7 +81,7 @@ pub fn Die(props: DieProps -> Element {
             }
         });
 
-    cx.render(rsx! {
+    rsx! {
       svg {
         onclick: move |e| cx.props.onclick.call(e),
         prevent_default: "onclick",
@@ -99,5 +99,5 @@ pub fn Die(props: DieProps -> Element {
 
         {dots}
       }
-    })
+    }
 }

examples/svg_basic.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn app() -> Element {
-    cx.render(rsx!( svg {
+    rsx!( svg {
         width: "200",
         height: "250",
         xmlns: "http://www.w3.org/2000/svg",
@@ -73,7 +73,7 @@ fn app() -> Element {
             "stroke-linecap": "square",
             "stroke-width": "square",
         }
-    }))
+    }
 }
 
 fn main() {

examples/tailwind/src/main.rs

@@ -13,7 +13,7 @@ fn main() {
 
 pub fn app() -> Element {
     let grey_background = true;
-    cx.render(rsx!(
+    rsx!(
         div {
             header {
                 class: "text-gray-400 body-font",
@@ -79,7 +79,7 @@ pub fn app() -> Element {
 }
 
 pub fn StacksIcon() -> Element {
-    cx.render(rsx!(
+    rsx!(
         svg {
             fill: "none",
             stroke: "currentColor",
@@ -94,7 +94,7 @@ pub fn StacksIcon() -> Element {
 }
 
 pub fn RightArrowIcon() -> Element {
-    cx.render(rsx!(
+    rsx!(
         svg {
             fill: "none",
             stroke: "currentColor",

examples/tasks.rs

@@ -10,19 +10,16 @@ fn main() {
 }
 
 fn app() -> Element {
-    let count = use_state(|| 0);
+    let mut count = use_signal(|| 0);
 
-    use_future((), move |_| {
-        let mut count = count.clone();
-        async move {
-            loop {
-                tokio::time::sleep(Duration::from_millis(1000)).await;
-                count += 1;
-            }
+    use_future(move |_| async move {
+        loop {
+            tokio::time::sleep(Duration::from_millis(1000)).await;
+            count += 1;
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 { "Current count: {count}" }
             button {
@@ -30,5 +27,5 @@ fn app() -> Element {
                 "Reset the count"
             }
         }
-    })
+    }
 }

examples/textarea.rs

@@ -7,11 +7,11 @@ fn main() {
 }
 
 fn app() -> Element {
-    let model = use_state(|| String::from("asd"));
+    let model = use_signal(|| String::from("asd"));
 
     println!("{model}");
 
-    cx.render(rsx! {
+    rsx! {
         textarea {
             class: "border",
             rows: "10",
@@ -19,5 +19,5 @@ fn app() -> Element {
             value: "{model}",
             oninput: move |e| model.set(e.value().clone()),
         }
-    })
+    }
 }

examples/todomvc.rs

@@ -22,8 +22,8 @@ pub struct TodoItem {
 }
 
 pub fn app(cx: Scope<()>) -> Element {
-    let todos = use_state(im_rc::HashMap::<u32, TodoItem>::default);
-    let filter = use_state(|| FilterState::All);
+    let todos = use_signal(im_rc::HashMap::<u32, TodoItem>::default);
+    let filter = use_signal(|| FilterState::All);
 
     // Filter the todos based on the filter state
     let mut filtered_todos = todos
@@ -45,7 +45,7 @@ pub fn app(cx: Scope<()>) -> Element {
 
     let show_clear_completed = todos.values().any(|todo| todo.checked);
 
-    cx.render(rsx! {
+    rsx! {
         section { class: "todoapp",
             style { {include_str!("./assets/todomvc.css")} }
             TodoHeader { todos: todos }
@@ -86,7 +86,7 @@ pub fn app(cx: Scope<()>) -> Element {
             }
         }
         PageFooter {}
-    })
+    }
 }
 
 #[derive(Props)]
@@ -94,11 +94,11 @@ pub struct TodoHeaderProps<'a> {
     todos: &'a UseState<im_rc::HashMap<u32, TodoItem>>,
 }
 
-pub fn TodoHeader(props: TodoHeaderProps -> Element {
-    let draft = use_state(|| "".to_string());
-    let todo_id = use_state(|| 0);
+pub fn TodoHeader(props: TodoHeaderProps) -> Element {
+    let draft = use_signal(|| "".to_string());
+    let todo_id = use_signal(|| 0);
 
-    cx.render(rsx! {
+    rsx! {
         header { class: "header",
             h1 { "todos" }
             input {
@@ -128,7 +128,7 @@ pub fn TodoHeader(props: TodoHeaderProps -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 #[derive(Props)]
@@ -137,15 +137,15 @@ pub struct TodoEntryProps<'a> {
     id: u32,
 }
 
-pub fn TodoEntry(props: TodoEntryProps -> Element {
-    let is_editing = use_state(|| false);
+pub fn TodoEntry(props: TodoEntryProps) -> Element {
+    let is_editing = use_signal(|| false);
 
     let todos = cx.props.todos.get();
     let todo = &todos[&cx.props.id];
     let completed = if todo.checked { "completed" } else { "" };
     let editing = if **is_editing { "editing" } else { "" };
 
-    cx.render(rsx!{
+    rsx! {
         li { class: "{completed} {editing}",
             div { class: "view",
                 input {
@@ -187,7 +187,7 @@ pub fn TodoEntry(props: TodoEntryProps -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 #[derive(Props)]
@@ -199,7 +199,7 @@ pub struct ListFooterProps<'a> {
     filter: &'a UseState<FilterState>,
 }
 
-pub fn ListFooter(props: ListFooterProps -> Element {
+pub fn ListFooter(props: ListFooterProps) -> Element {
     let active_todo_count = cx.props.active_todo_count;
     let active_todo_text = cx.props.active_todo_text;
 
@@ -211,7 +211,7 @@ pub fn ListFooter(props: ListFooterProps -> Element {
         }
     };
 
-    cx.render(rsx! {
+    rsx! {
         footer { class: "footer",
             span { class: "todo-count",
                 strong { "{active_todo_count} " }
@@ -242,11 +242,11 @@ pub fn ListFooter(props: ListFooterProps -> Element {
                 }
             }
         }
-    })
+    }
 }
 
 pub fn PageFooter() -> Element {
-    cx.render(rsx! {
+    rsx! {
         footer { class: "info",
             p { "Double-click to edit a todo" }
             p {
@@ -258,5 +258,5 @@ pub fn PageFooter() -> Element {
                 a { href: "http://todomvc.com", "TodoMVC" }
             }
         }
-    })
+    }
 }

examples/web_component.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         web-component {
             "my-prop": "5%",
         }
-    })
+    }
 }

examples/window_event.rs

@@ -18,11 +18,11 @@ fn app() -> Element {
     // window.set_fullscreen(true);
     // window.set_resizable(false);
 
-    let fullscreen = use_state(|| false);
-    let always_on_top = use_state(|| false);
-    let decorations = use_state(|| false);
+    let fullscreen = use_signal(|| false);
+    let always_on_top = use_signal(|| false);
+    let decorations = use_signal(|| false);
 
-    cx.render(rsx!(
+    rsx!(
         link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel:"stylesheet" }
         header {
             class: "text-gray-400 bg-gray-900 body-font",
@@ -95,5 +95,5 @@ fn app() -> Element {
                 }
             }
         }
-    ))
+    )
 }

examples/window_focus.rs

@@ -11,22 +11,19 @@ fn main() {
 }
 
 fn app() -> Element {
-    let focused = use_state(|| false);
+    let focused = use_signal(|| false);
 
-    use_wry_event_handler({
-        to_owned![focused];
-        move |event, _| {
-            if let WryEvent::WindowEvent {
-                event: WindowEvent::Focused(new_focused),
-                ..
-            } = event
-            {
-                focused.set(*new_focused);
-            }
+    use_wry_event_handler(move |event, _| {
+        if let WryEvent::WindowEvent {
+            event: WindowEvent::Focused(new_focused),
+            ..
+        } = event
+        {
+            focused.set(*new_focused);
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -41,5 +38,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

examples/window_zoom.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let level = use_state(|| 1.0);
+    let level = use_signal(|| 1.0);
 
-    cx.render(rsx! {
+    rsx! {
         input {
             r#type: "number",
             value: "{level}",
@@ -18,5 +18,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

examples/xss_safety.rs

@@ -9,9 +9,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let contents = use_state(|| String::from("<script>alert(\"hello world\")</script>"));
+    let contents = use_signal(|| String::from("<script>alert(\"hello world\")</script>"));
 
-    cx.render(rsx! {
+    rsx! {
         div {
             h1 {"Dioxus is XSS-Safe"}
             h3 { "{contents}" }
@@ -21,5 +21,5 @@ fn app() -> Element {
                 oninput: move |e| contents.set(e.value()),
             }
         }
-    })
+    }
 }