remove cx.render

README.md

@@ -56,13 +56,13 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla
 
 ```rust
 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/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! {
+    rsx! {
-        button { onclick: login, "Click me!" }
+        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 elements = use_signal(Vec::<Rc<MountedData>>::new);
-    let running = use_state(|| true);
+    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 first_name = use_signal(String::new);
-    let last_name = use_state(String::new);
+    let last_name = use_signal(String::new);
-    let description = use_state(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 {
+fn AppRoot(_: ()) -> Element {
-    let breed = use_state(|| "deerhound".to_string());
+    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 {
+fn App(_: ()) -> Element {
-    cx.render(rsx! {
+    rsx! {
         ErrorBoundary {
             handle_error: |error: CapturedError| rsx! {"Found error {error}"},
-            DemoC {
+            DemoC { x: 1 }
-                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 enable_directory_upload = use_signal(|| false);
-    let files_uploaded: &UseRef<Vec<String>> = use_ref(Vec::new);
+    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 items = use_signal(Vec::new);
-    let selected = use_state(|| None);
+    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! {
+    rsx! {
-    div {
+        div {
-        select {
+            select {
-            id: "selection",
+                id: "selection",
-            name: "selection",
+                name: "selection",
-            multiple: true,
+                multiple: true,
-            oninput: move |evt| {
+                oninput: move |evt| println!("{evt:?}"),
-                println!("{evt:?}");
+                option {
-            },
+                    value: "Option 1",
-            option {
+                    label: "Option 1",
-                value : "Option 1",
+                }
-                label : "Option 1",
+                option {
+                    value: "Option 2",
+                    label: "Option 2",
+                    selected: true,
+                },
+                option {
+                    value: "Option 3",
+                    label: "Option 3",
+                }
             }
-            option {
+            label {
-                value : "Option 2",
+                r#for: "selection",
-                label : "Option 2",
+                "select element"
-                selected : true,
-            },
-            option {
-                value : "Option 3",
-                label : "Option 3",
             }
         }
-        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 {
+pub fn Taller(props: TallerProps) -> Element {
-    cx.render(rsx! {
+    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| {
+                onmounted: move |cx| header_element.set(Some(cx.inner().clone())),
-                    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>(
+fn Component(a: i32, b: i32, c: i32, children: Element, onclick: EventHandler<()>) -> Element {
-    cx: Scope<'a>,
-    a: i32,
-    b: i32,
-    c: i32,
-    children: Element,
-    onclick: EventHandler<'a, ()>,
-) -> 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 |_| {
+    use_future(move |_| async move {
-        let mut count = count.clone();
+        loop {
-        async move {
+            tokio::time::sleep(Duration::from_millis(1000)).await;
-            loop {
+            count += 1;
-                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 todos = use_signal(im_rc::HashMap::<u32, TodoItem>::default);
-    let filter = use_state(|| FilterState::All);
+    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 {
+pub fn TodoHeader(props: TodoHeaderProps) -> Element {
-    let draft = use_state(|| "".to_string());
+    let draft = use_signal(|| "".to_string());
-    let todo_id = use_state(|| 0);
+    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 {
+pub fn TodoEntry(props: TodoEntryProps) -> Element {
-    let is_editing = use_state(|| false);
+    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 fullscreen = use_signal(|| false);
-    let always_on_top = use_state(|| false);
+    let always_on_top = use_signal(|| false);
-    let decorations = use_state(|| 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({
+    use_wry_event_handler(move |event, _| {
-        to_owned![focused];
+        if let WryEvent::WindowEvent {
-        move |event, _| {
+            event: WindowEvent::Focused(new_focused),
-            if let WryEvent::WindowEvent {
+            ..
-                event: WindowEvent::Focused(new_focused),
+        } = event
-                ..
+        {
-            } = event
+            focused.set(*new_focused);
-            {
-                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()),
             }
         }
-    })
+    }
 }

notes/README/ZH_CN.md

@@ -56,9 +56,9 @@ Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，
 
 ```rust
 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!" }

packages/autofmt/tests/samples/immediate_expr.rsx

@@ -1,4 +1,4 @@
 fn it_works() {
-    cx.render(rsx!({()}))
+    rsx!({()}))
 }
 

packages/autofmt/tests/samples/long.rsx

@@ -32,7 +32,7 @@ pub fn Explainer<'a>(
         std::mem::swap(&mut left, &mut right);
     }
 
-    cx.render(rsx! {
+    rsx! {
         div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light",
             {left},
             {right}

packages/autofmt/tests/samples/messy_indent.rsx

@@ -7,7 +7,7 @@ fn SaveClipboard() -> Element {
         }
     };
 
-    cx.render(rsx! {
+    rsx! {
         div { "hello world", "hello world", "hello world" }
     })
 }

packages/autofmt/tests/samples/reallylong.rsx

@@ -1,5 +1,5 @@
 pub static Icon3: Component<()> = |cx| {
-    cx.render(rsx! {
+    rsx! {
         svg {
             class: "w-6 h-6",
             stroke_linecap: "round",

packages/autofmt/tests/samples/trailing_expr.rsx

@@ -1,5 +1,5 @@
 fn it_works() {
-    cx.render(rsx! {
+    rsx! {
         div {
             span { "Description: ", {package.description.as_deref().unwrap_or("❌❌❌❌ missing")} }
         }

packages/autofmt/tests/wrong/multi-4sp.rsx

@@ -1,3 +1,3 @@
 fn app() -> Element {
-    cx.render(rsx! { div { "hello world" } })
+    rsx! { div { "hello world" } })
 }

packages/autofmt/tests/wrong/multi-4sp.wrong.rsx

@@ -1,5 +1,5 @@
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {"hello world" }
     })
 }

packages/autofmt/tests/wrong/multi-tab.rsx

@@ -1,3 +1,3 @@
 fn app() -> Element {
-	cx.render(rsx! { div { "hello world" } })
+	rsx! { div { "hello world" } })
 }

packages/autofmt/tests/wrong/multi-tab.wrong.rsx

@@ -1,5 +1,5 @@
 fn app() -> Element {
-	cx.render(rsx! {
+	rsx! {
 		div {"hello world" }
 	})
 }

packages/autofmt/tests/wrong/multiexpr-4sp.rsx

@@ -1,5 +1,5 @@
 fn ItWroks() {
-    cx.render(rsx! {
+    rsx! {
         div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light",
             {left},
             {right}

packages/autofmt/tests/wrong/multiexpr-4sp.wrong.rsx

@@ -1,5 +1,5 @@
 fn ItWroks() {
-    cx.render(rsx! {
+    rsx! {
         div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} }
     })
 }

packages/autofmt/tests/wrong/multiexpr-tab.rsx

@@ -1,5 +1,5 @@
 fn ItWroks() {
-	cx.render(rsx! {
+	rsx! {
 		div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light",
 			{left},
 			{right}

packages/autofmt/tests/wrong/multiexpr-tab.wrong.rsx

@@ -1,5 +1,5 @@
 fn ItWroks() {
-	cx.render(rsx! {
+	rsx! {
 		div { class: "flex flex-wrap items-center dark:text-white py-16 border-t font-light", {left}, {right} }
 	})
 }

packages/check/src/check.rs

@@ -295,7 +295,7 @@ mod tests {
     fn test_hook_correctly_used_inside_component() {
         let contents = indoc! {r#"
             fn App() -> Element {
-                let count = use_state(|| 0);
+                let count = use_signal(|| 0);
                 rsx! {
                     p { "Hello World: {count}" }
                 }
@@ -311,7 +311,7 @@ mod tests {
     fn test_hook_correctly_used_inside_hook_fn() {
         let contents = indoc! {r#"
             fn use_thing() -> UseState<i32> {
-                use_state(|| 0)
+                use_signal(|| 0)
             }
         "#};
 
@@ -325,7 +325,7 @@ mod tests {
         let contents = indoc! {r#"
             fn App() -> Element {
                 let use_thing = || {
-                    use_state(|| 0)
+                    use_signal(|| 0)
                 };
                 let count = use_thing();
                 rsx! {
@@ -344,7 +344,7 @@ mod tests {
         let contents = indoc! {r#"
             fn App() -> Element {
                 if you_are_happy && you_know_it {
-                    let something = use_state(|| "hands");
+                    let something = use_signal(|| "hands");
                     println!("clap your {something}")
                 }
             }
@@ -357,7 +357,7 @@ mod tests {
             vec![Issue::HookInsideConditional(
                 HookInfo::new(
                     Span::new_from_str(
-                        r#"use_state(|| "hands")"#,
+                        r#"use_signal(|| "hands")"#,
                         LineColumn { line: 3, column: 24 },
                     ),
                     Span::new_from_str(
@@ -368,7 +368,7 @@ mod tests {
                 ),
                 ConditionalInfo::If(IfInfo::new(
                     Span::new_from_str(
-                        "if you_are_happy && you_know_it {\n        let something = use_state(|| \"hands\");\n        println!(\"clap your {something}\")\n    }",
+                        "if you_are_happy && you_know_it {\n        let something = use_signal(|| \"hands\");\n        println!(\"clap your {something}\")\n    }",
                         LineColumn { line: 2, column: 4 },
                     ),
                     Span::new_from_str(
@@ -386,7 +386,7 @@ mod tests {
             fn App() -> Element {
                 match you_are_happy && you_know_it {
                     true => {
-                        let something = use_state(|| "hands");
+                        let something = use_signal(|| "hands");
                         println!("clap your {something}")
                     }
                     false => {}
@@ -400,13 +400,13 @@ mod tests {
             report.issues,
             vec![Issue::HookInsideConditional(
                 HookInfo::new(
-                    Span::new_from_str(r#"use_state(|| "hands")"#, LineColumn { line: 4, column: 28 }),
+                    Span::new_from_str(r#"use_signal(|| "hands")"#, LineColumn { line: 4, column: 28 }),
                     Span::new_from_str(r#"use_state"#, LineColumn { line: 4, column: 28 }),
                     "use_state".to_string()
                 ),
                 ConditionalInfo::Match(MatchInfo::new(
                     Span::new_from_str(
-                        "match you_are_happy && you_know_it {\n        true => {\n            let something = use_state(|| \"hands\");\n            println!(\"clap your {something}\")\n        }\n        false => {}\n    }",
+                        "match you_are_happy && you_know_it {\n        true => {\n            let something = use_signal(|| \"hands\");\n            println!(\"clap your {something}\")\n        }\n        false => {}\n    }",
                         LineColumn { line: 2, column: 4 },
                     ),
                     Span::new_from_str("match you_are_happy && you_know_it", LineColumn { line: 2, column: 4 })
@@ -420,7 +420,7 @@ mod tests {
         let contents = indoc! {r#"
             fn App() -> Element {
                 for _name in &names {
-                    let is_selected = use_state(|| false);
+                    let is_selected = use_signal(|| false);
                     println!("selected: {is_selected}");
                 }
             }
@@ -433,7 +433,7 @@ mod tests {
             vec![Issue::HookInsideLoop(
                 HookInfo::new(
                     Span::new_from_str(
-                        "use_state(|| false)",
+                        "use_signal(|| false)",
                         LineColumn { line: 3, column: 26 },
                     ),
                     Span::new_from_str(
@@ -444,7 +444,7 @@ mod tests {
                 ),
                 AnyLoopInfo::For(ForInfo::new(
                     Span::new_from_str(
-                        "for _name in &names {\n        let is_selected = use_state(|| false);\n        println!(\"selected: {is_selected}\");\n    }",
+                        "for _name in &names {\n        let is_selected = use_signal(|| false);\n        println!(\"selected: {is_selected}\");\n    }",
                         LineColumn { line: 2, column: 4 },
                     ),
                     Span::new_from_str(
@@ -461,7 +461,7 @@ mod tests {
         let contents = indoc! {r#"
             fn App() -> Element {
                 while true {
-                    let something = use_state(|| "hands");
+                    let something = use_signal(|| "hands");
                     println!("clap your {something}")
                 }
             }
@@ -474,7 +474,7 @@ mod tests {
             vec![Issue::HookInsideLoop(
                 HookInfo::new(
                     Span::new_from_str(
-                        r#"use_state(|| "hands")"#,
+                        r#"use_signal(|| "hands")"#,
                         LineColumn { line: 3, column: 24 },
                     ),
                     Span::new_from_str(
@@ -485,7 +485,7 @@ mod tests {
                 ),
                 AnyLoopInfo::While(WhileInfo::new(
                     Span::new_from_str(
-                        "while true {\n        let something = use_state(|| \"hands\");\n        println!(\"clap your {something}\")\n    }",
+                        "while true {\n        let something = use_signal(|| \"hands\");\n        println!(\"clap your {something}\")\n    }",
                         LineColumn { line: 2, column: 4 },
                     ),
                     Span::new_from_str(
@@ -502,7 +502,7 @@ mod tests {
         let contents = indoc! {r#"
             fn App() -> Element {
                 loop {
-                    let something = use_state(|| "hands");
+                    let something = use_signal(|| "hands");
                     println!("clap your {something}")
                 }
             }
@@ -515,7 +515,7 @@ mod tests {
             vec![Issue::HookInsideLoop(
                 HookInfo::new(
                     Span::new_from_str(
-                        r#"use_state(|| "hands")"#,
+                        r#"use_signal(|| "hands")"#,
                         LineColumn { line: 3, column: 24 },
                     ),
                     Span::new_from_str(
@@ -525,7 +525,7 @@ mod tests {
                     "use_state".to_string()
                 ),
                 AnyLoopInfo::Loop(LoopInfo::new(Span::new_from_str(
-                    "loop {\n        let something = use_state(|| \"hands\");\n        println!(\"clap your {something}\")\n    }",
+                    "loop {\n        let something = use_signal(|| \"hands\");\n        println!(\"clap your {something}\")\n    }",
                     LineColumn { line: 2, column: 4 },
                 )))
             )],
@@ -536,7 +536,7 @@ mod tests {
     fn test_conditional_okay() {
         let contents = indoc! {r#"
             fn App() -> Element {
-                let something = use_state(|| "hands");
+                let something = use_signal(|| "hands");
                 if you_are_happy && you_know_it {
                     println!("clap your {something}")
                 }
@@ -553,7 +553,7 @@ mod tests {
         let contents = indoc! {r#"
             fn App() -> Element {
                 let _a = || {
-                    let b = use_state(|| 0);
+                    let b = use_signal(|| 0);
                     b.get()
                 };
             }
@@ -566,7 +566,7 @@ mod tests {
             vec![Issue::HookInsideClosure(
                 HookInfo::new(
                     Span::new_from_str(
-                        "use_state(|| 0)",
+                        "use_signal(|| 0)",
                         LineColumn {
                             line: 3,
                             column: 16
@@ -582,7 +582,7 @@ mod tests {
                     "use_state".to_string()
                 ),
                 ClosureInfo::new(Span::new_from_str(
-                    "|| {\n        let b = use_state(|| 0);\n        b.get()\n    }",
+                    "|| {\n        let b = use_signal(|| 0);\n        b.get()\n    }",
                     LineColumn {
                         line: 2,
                         column: 13
@@ -596,7 +596,7 @@ mod tests {
     fn test_hook_outside_component() {
         let contents = indoc! {r#"
             fn not_component_or_hook() {
-                let _a = use_state(|| 0);
+                let _a = use_signal(|| 0);
             }
         "#};
 
@@ -606,7 +606,7 @@ mod tests {
             report.issues,
             vec![Issue::HookOutsideComponent(HookInfo::new(
                 Span::new_from_str(
-                    "use_state(|| 0)",
+                    "use_signal(|| 0)",
                     LineColumn {
                         line: 2,
                         column: 13
@@ -628,7 +628,7 @@ mod tests {
     fn test_hook_inside_hook() {
         let contents = indoc! {r#"
             fn use_thing() {
-                let _a = use_state(|| 0);
+                let _a = use_signal(|| 0);
             }
         "#};
 

packages/check/src/issues.rs

@@ -232,7 +232,7 @@ mod tests {
             indoc! {r#"
                 fn App() -> Element {
                     if you_are_happy && you_know_it {
-                        let something = use_state(|| "hands");
+                        let something = use_signal(|| "hands");
                         println!("clap your {something}")
                     }
                 }
@@ -243,7 +243,7 @@ mod tests {
             error: hook called conditionally: `use_state` (inside `if`)
               --> src/main.rs:3:25
               |
-            3 |         let something = use_state(|| "hands");
+            3 |         let something = use_signal(|| "hands");
               |                         ^^^^^^^^^
               |
               = note: `if you_are_happy && you_know_it { … }` is the conditional
@@ -261,7 +261,7 @@ mod tests {
                 fn App() -> Element {
                     match you_are_happy && you_know_it {
                         true => {
-                            let something = use_state(|| "hands");
+                            let something = use_signal(|| "hands");
                             println!("clap your {something}")
                         }
                         _ => {}
@@ -274,7 +274,7 @@ mod tests {
             error: hook called conditionally: `use_state` (inside `match`)
               --> src/main.rs:4:29
               |
-            4 |             let something = use_state(|| "hands");
+            4 |             let something = use_signal(|| "hands");
               |                             ^^^^^^^^^
               |
               = note: `match you_are_happy && you_know_it { … }` is the conditional
@@ -291,7 +291,7 @@ mod tests {
             indoc! {r#"
                 fn App() -> Element {
                     for i in 0..10 {
-                        let something = use_state(|| "hands");
+                        let something = use_signal(|| "hands");
                         println!("clap your {something}")
                     }
                 }
@@ -302,7 +302,7 @@ mod tests {
             error: hook called in a loop: `use_state` (inside `for` loop)
               --> src/main.rs:3:25
               |
-            3 |         let something = use_state(|| "hands");
+            3 |         let something = use_signal(|| "hands");
               |                         ^^^^^^^^^
               |
               = note: `for i in 0..10 { … }` is the loop
@@ -319,7 +319,7 @@ mod tests {
             indoc! {r#"
                 fn App() -> Element {
                     while check_thing() {
-                        let something = use_state(|| "hands");
+                        let something = use_signal(|| "hands");
                         println!("clap your {something}")
                     }
                 }
@@ -330,7 +330,7 @@ mod tests {
             error: hook called in a loop: `use_state` (inside `while` loop)
               --> src/main.rs:3:25
               |
-            3 |         let something = use_state(|| "hands");
+            3 |         let something = use_signal(|| "hands");
               |                         ^^^^^^^^^
               |
               = note: `while check_thing() { … }` is the loop
@@ -347,7 +347,7 @@ mod tests {
             indoc! {r#"
                 fn App() -> Element {
                     loop {
-                        let something = use_state(|| "hands");
+                        let something = use_signal(|| "hands");
                         println!("clap your {something}")
                     }
                 }
@@ -358,7 +358,7 @@ mod tests {
             error: hook called in a loop: `use_state` (inside `loop`)
               --> src/main.rs:3:25
               |
-            3 |         let something = use_state(|| "hands");
+            3 |         let something = use_signal(|| "hands");
               |                         ^^^^^^^^^
               |
               = note: `loop { … }` is the loop
@@ -375,7 +375,7 @@ mod tests {
             indoc! {r#"
                 fn App() -> Element {
                     let something = || {
-                        let something = use_state(|| "hands");
+                        let something = use_signal(|| "hands");
                         println!("clap your {something}")
                     };
                 }
@@ -386,7 +386,7 @@ mod tests {
             error: hook called in a closure: `use_state`
               --> src/main.rs:3:25
               |
-            3 |         let something = use_state(|| "hands");
+            3 |         let something = use_signal(|| "hands");
               |                         ^^^^^^^^^
         "#};
 
@@ -401,7 +401,7 @@ mod tests {
             indoc! {r#"
                 fn App() -> Element {
                     if you_are_happy && you_know_it {
-                        let something = use_state(|| {
+                        let something = use_signal(|| {
                             "hands"
                         });
                         println!("clap your {something}")
@@ -414,7 +414,7 @@ mod tests {
             error: hook called conditionally: `use_state` (inside `if`)
               --> src/main.rs:3:25
               |
-            3 |         let something = use_state(|| {
+            3 |         let something = use_signal(|| {
               |                         ^^^^^^^^^
             4 |             "hands"
             5 |         });

packages/check/src/metadata.rs

@@ -3,7 +3,7 @@
 pub struct HookInfo {
     /// The name of the hook, e.g. `use_state`.
     pub name: String,
-    /// The span of the hook, e.g. `use_state(|| 0)`.
+    /// The span of the hook, e.g. `use_signal(|| 0)`.
     pub span: Span,
     /// The span of the name, e.g. `use_state`.
     pub name_span: Span,

packages/cli/src/cli/translate.rs

@@ -71,7 +71,7 @@ fn write_callbody_with_icon_section(mut callbody: CallBody) -> String {
 }
 
 fn write_component_body(raw: String) -> String {
-    let mut out = String::from("fn component() -> Element {\n    cx.render(rsx! {");
+    let mut out = String::from("fn component() -> Element {\n    rsx! {");
     indent_and_write(&raw, 1, &mut out);
     out.push_str("    })\n}");
     out
@@ -84,7 +84,7 @@ fn write_svg_section(out: &mut String, svgs: Vec<BodyNode>) {
         let raw = dioxus_autofmt::write_block_out(CallBody { roots: vec![icon] }).unwrap();
         out.push_str("\n\n    pub fn icon_");
         out.push_str(&idx.to_string());
-        out.push_str("() -> Element {\n        cx.render(rsx! {");
+        out.push_str("() -> Element {\n        rsx! {");
         indent_and_write(&raw, 2, out);
         out.push_str("        })\n    }");
     }

packages/core-macro/src/component_body_deserializers/component.rs

@@ -27,6 +27,11 @@ fn get_out_comp_fn(orig_comp_fn: &ItemFn) -> ItemFn {
         ..orig_comp_fn.clone()
     };
 
+    let props_ident = match orig_comp_fn.sig.inputs.is_empty() {
+        true => quote! {},
+        false => quote! { __props },
+    };
+
     ItemFn {
         block: parse_quote! {
             {
@@ -34,7 +39,7 @@ fn get_out_comp_fn(orig_comp_fn: &ItemFn) -> ItemFn {
                 #[allow(clippy::inline_always)]
                 #[inline(always)]
                 #inner_comp_fn
-                #inner_comp_ident(__props)
+                #inner_comp_ident(#props_ident)
             }
         },
         ..orig_comp_fn.clone()

packages/core-macro/src/lib.rs

@@ -66,7 +66,7 @@ pub fn render(s: TokenStream) -> TokenStream {
 /// ```rust,ignore
 /// #[inline_props]
 /// fn app(bob: String) -> Element {
-///     cx.render(rsx!("hello, {bob}"))
+///     rsx!("hello, {bob}"))
 /// }
 ///
 /// // is equivalent to
@@ -77,7 +77,7 @@ pub fn render(s: TokenStream) -> TokenStream {
 /// }
 ///
 /// fn app(cx: Scope<AppProps>) -> Element {
-///     cx.render(rsx!("hello, {bob}"))
+///     rsx!("hello, {bob}"))
 /// }
 /// ```
 #[proc_macro_attribute]

packages/core/README.md

@@ -39,7 +39,7 @@ use dioxus::prelude::*;
 
 // First, declare a root component
 fn app() -> Element {
-    cx.render(rsx!{
+    rsx!{
         div { "hello world" }
     })
 }

packages/core/src/error_boundary.rs

@@ -143,7 +143,7 @@ impl ErrorBoundary {
 /// fn app( count: String) -> Element {
 ///     let id: i32 = count.parse().throw()?;
 ///
-///     cx.render(rsx! {
+///     rsx! {
 ///         div { "Count {}" }
 ///     })
 /// }
@@ -168,7 +168,7 @@ pub trait Throw<S = ()>: Sized {
     /// fn app( count: String) -> Element {
     ///     let id: i32 = count.parse().throw()?;
     ///
-    ///     cx.render(rsx! {
+    ///     rsx! {
     ///         div { "Count {}" }
     ///     })
     /// }
@@ -191,7 +191,7 @@ pub trait Throw<S = ()>: Sized {
     /// fn app( count: String) -> Element {
     ///     let id: i32 = count.parse().throw()?;
     ///
-    ///     cx.render(rsx! {
+    ///     rsx! {
     ///         div { "Count {}" }
     ///     })
     /// }

packages/core/src/events.rs

@@ -146,7 +146,7 @@ impl<T: std::fmt::Debug> std::fmt::Debug for Event<T> {
 /// }
 ///
 /// fn MyComponent(cx: MyProps) -> Element {
-///     cx.render(rsx!{
+///     rsx!{
 ///         button {
 ///             onclick: move |evt| cx.onclick.call(evt),
 ///         }

packages/core/src/fragment.rs

@@ -63,7 +63,7 @@ impl<const A: bool> FragmentBuilder<A> {
 ///
 /// ```rust, ignore
 /// fn app() -> Element {
-///     cx.render(rsx!{
+///     rsx!{
 ///         CustomCard {
 ///             h1 {}
 ///             p {}
@@ -77,7 +77,7 @@ impl<const A: bool> FragmentBuilder<A> {
 /// }
 ///
 /// fn CustomCard(cx: CardProps) -> Element {
-///     cx.render(rsx!{
+///     rsx!{
 ///         div {
 ///             h1 {"Title card"}
 ///             {cx.children}

packages/core/src/virtual_dom.rs

@@ -35,7 +35,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc};
 /// }
 ///
 /// fn app(cx: AppProps) -> Element {
-///     cx.render(rsx!(
+///     rsx!(
 ///         div {"hello, {cx.title}"}
 ///     ))
 /// }
@@ -56,7 +56,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc};
 ///
 /// #[component]
 /// fn app(cx: AppProps) -> Element {
-///     cx.render(rsx!(
+///     rsx!(
 ///         NavBar { routes: ROUTES }
 ///         Title { "{cx.title}" }
 ///         Footer {}
@@ -65,19 +65,19 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc};
 ///
 /// #[component]
 /// fn NavBar( routes: &'static str) -> Element {
-///     cx.render(rsx! {
+///     rsx! {
 ///         div { "Routes: {routes}" }
 ///     })
 /// }
 ///
 /// #[component]
 /// fn Footer() -> Element {
-///     cx.render(rsx! { div { "Footer" } })
+///     rsx! { div { "Footer" } })
 /// }
 ///
 /// #[component]
 /// fn Title<'a>( children: Element) -> Element {
-///     cx.render(rsx! {
+///     rsx! {
 ///         div { id: "title", {children} }
 ///     })
 /// }
@@ -88,7 +88,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc};
 ///
 /// ```rust
 /// # use dioxus::prelude::*;
-/// # fn app() -> Element { cx.render(rsx! { div {} }) }
+/// # fn app() -> Element { rsx! { div {} }) }
 ///
 /// let mut vdom = VirtualDom::new(app);
 /// let edits = vdom.rebuild();
@@ -128,7 +128,7 @@ use std::{any::Any, cell::Cell, collections::BTreeSet, future::Future, rc::Rc};
 /// ```rust, ignore
 /// #[component]
 /// fn app() -> Element {
-///     cx.render(rsx! {
+///     rsx! {
 ///         div { "Hello World" }
 ///     })
 /// }
@@ -219,7 +219,7 @@ impl VirtualDom {
     /// # Example
     /// ```rust, ignore
     /// fn Example() -> Element  {
-    ///     cx.render(rsx!( div { "hello world" } ))
+    ///     rsx!( div { "hello world" } ))
     /// }
     ///
     /// let dom = VirtualDom::new(Example);
@@ -248,7 +248,7 @@ impl VirtualDom {
     /// }
     ///
     /// fn Example(cx: SomeProps) -> Element  {
-    ///     cx.render(rsx!{ div{ "hello {cx.name}" } })
+    ///     rsx!{ div{ "hello {cx.name}" } })
     /// }
     ///
     /// let dom = VirtualDom::new(Example);
@@ -546,7 +546,7 @@ impl VirtualDom {
     ///
     /// # Example
     /// ```rust, ignore
-    /// static app: Component = |cx|  cx.render(rsx!{ "hello world" });
+    /// static app: Component = |cx|  rsx!{ "hello world" });
     ///
     /// let mut dom = VirtualDom::new();
     /// let edits = dom.rebuild();

packages/desktop/examples/stress.rs

@@ -1,8 +1,8 @@
 use dioxus::prelude::*;
 
 fn app() -> Element {
-    let state = use_state(|| 0);
+    let state = use_signal(|| 0);
-    use_future((), |_| {
+    use_future(|_| {
         to_owned![state];
         async move {
             loop {
@@ -12,7 +12,7 @@ fn app() -> Element {
         }
     });
 
-    cx.render(rsx! {
+    rsx! {
         button {
             onclick: move |_| {
                 state.set(0);
@@ -24,7 +24,7 @@ fn app() -> Element {
                 "hello desktop! {state}"
             }
         }
-    })
+    }
 }
 
 fn main() {

packages/desktop/headless_tests/events.rs

@@ -52,7 +52,7 @@ fn mock_event(id: &'static str, value: &'static str) {
 #[allow(deprecated)]
 fn app() -> Element {
     let desktop_context: DesktopContext = cx.consume_context().unwrap();
-    let received_events = use_state(|| 0);
+    let received_events = use_signal(|| 0);
 
     // button
     mock_event(

packages/desktop/headless_tests/rendering.rs

@@ -29,7 +29,7 @@ fn main() {
 fn use_inner_html(d: &'static str) -> Option<String> {
     let eval_provider = use_eval(cx);
 
-    let value: &UseRef<Option<String>> = use_ref(|| None);
+    let value: Signal<Option<String>> = use_signal(|| None);
     use_effect((), |_| {
         to_owned![value, eval_provider];
         async move {

packages/desktop/src/launch.rs

@@ -18,7 +18,7 @@ use tao::event::{Event, StartCause, WindowEvent};
 /// }
 ///
 /// fn app() -> Element {
-///     cx.render(rsx!{
+///     rsx!{
 ///         h1 {"hello world!"}
 ///     })
 /// }
@@ -42,7 +42,7 @@ pub fn launch(root: Component) {
 /// }
 ///
 /// fn app() -> Element {
-///     cx.render(rsx!{
+///     rsx!{
 ///         h1 {"hello world!"}
 ///     })
 /// }
@@ -71,7 +71,7 @@ pub fn launch_cfg(root: Component, config_builder: Config) {
 /// }
 ///
 /// fn app(cx: Scope<AppProps>) -> Element {
-///     cx.render(rsx!{
+///     rsx!{
 ///         h1 {"hello {cx.props.name}!"}
 ///     })
 /// }

packages/desktop/src/readme.md

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

packages/dioxus-tui/README.md

@@ -43,7 +43,7 @@ Leverage React-like patterns, CSS, HTML, and Rust to build beautiful, portable,
 
 ```rust
 fn app() -> Element {
-    cx.render(rsx!{
+    rsx!{
         div {
             width: "100%",
             height: "10px",

packages/dioxus-tui/benches/update.rs

@@ -66,7 +66,7 @@ struct BoxProps {
 }
 #[allow(non_snake_case)]
 fn Box(cx: Scope<BoxProps>) -> Element {
-    let count = use_state(|| 0);
+    let count = use_signal(|| 0);
 
     let x = cx.props.x * 2;
     let y = cx.props.y * 2;
@@ -75,7 +75,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
     let count = count.get();
     let alpha = cx.props.alpha + (count % 100) as f32;
 
-    cx.render(rsx! {
+    rsx! {
         div {
             left: "{x}%",
             top: "{y}%",
@@ -85,7 +85,7 @@ fn Box(cx: Scope<BoxProps>) -> Element {
             align_items: "center",
             p{"{display_hue:03}"}
         }
-    })
+    }
 }
 
 #[derive(Props, PartialEq)]
@@ -96,8 +96,8 @@ struct GridProps {
 #[allow(non_snake_case)]
 fn Grid(cx: Scope<GridProps>) -> Element {
     let size = cx.props.size;
-    let count = use_state(|| 0);
+    let count = use_signal(|| 0);
-    let counts = use_ref(|| vec![0; size * size]);
+    let counts = use_signal(|| vec![0; size * size]);
 
     let ctx: TuiContext = cx.consume_context().unwrap();
     if *count.get() + cx.props.update_count >= (size * size) {
@@ -152,7 +152,7 @@ fn Grid(cx: Scope<GridProps>) -> Element {
 }
 
 fn app(cx: Scope<GridProps>) -> Element {
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -161,5 +161,5 @@ fn app(cx: Scope<GridProps>) -> Element {
                 update_count: cx.props.update_count,
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/all_terminal_events.rs

@@ -27,7 +27,7 @@ enum Event {
 const MAX_EVENTS: usize = 8;
 
 fn app() -> Element {
-    let events = use_ref(Vec::new);
+    let events = use_signal(Vec::new);
 
     let events_lock = events.read();
     let first_index = events_lock.len().saturating_sub(MAX_EVENTS);
@@ -44,7 +44,7 @@ fn app() -> Element {
         events.write().push(event);
     };
 
-    cx.render(rsx! {
+    rsx! {
         div { width: "100%", height: "100%", flex_direction: "column",
             div {
                 width: "80%",
@@ -73,5 +73,5 @@ fn app() -> Element {
             }
             div { width: "80%", height: "50%", flex_direction: "column", {events_rendered} }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/border.rs

@@ -5,9 +5,9 @@ fn main() {
 }
 
 fn app() -> Element {
-    let radius = use_state(|| 0);
+    let radius = use_signal(|| 0);
 
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -23,5 +23,5 @@ fn app() -> Element {
 
             "{radius}"
         }
-    })
+    }
 }

packages/dioxus-tui/examples/buttons.rs

@@ -13,15 +13,15 @@ struct ButtonProps {
 
 #[allow(non_snake_case)]
 fn Button(cx: Scope<ButtonProps>) -> Element {
-    let toggle = use_state(|| false);
+    let toggle = use_signal(|| false);
-    let hovered = use_state(|| false);
+    let hovered = use_signal(|| false);
 
     let hue = cx.props.color_offset % 255;
     let saturation = if *toggle.get() { 50 } else { 25 } + if *hovered.get() { 50 } else { 25 };
     let brightness = saturation / 2;
     let color = format!("hsl({hue}, {saturation}, {brightness})");
 
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -47,11 +47,11 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
             flex_direction: "column",
             p{ "tabindex: {cx.props.layer}" }
         }
-    })
+    }
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             display: "flex",
             flex_direction: "column",
@@ -80,5 +80,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/color_test.rs

@@ -9,7 +9,7 @@ fn main() {
 
 fn app() -> Element {
     let steps = 50;
-    cx.render(rsx! {
+    rsx! {
         div{
             width: "100%",
             height: "100%",
@@ -34,5 +34,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/colorpicker.rs

@@ -9,12 +9,12 @@ fn main() {
 }
 
 fn app() -> Element {
-    let hue = use_state(|| 0.0);
+    let hue = use_signal(|| 0.0);
-    let brightness = use_state(|| 0.0);
+    let brightness = use_signal(|| 0.0);
     let tui_query: Query = cx.consume_context().unwrap();
     let mapping: DioxusElementToNodeId = cx.consume_context().unwrap();
     // disable templates so that every node has an id and can be queried
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             background_color: "hsl({hue}, 70%, {brightness}%)",
@@ -31,5 +31,5 @@ fn app() -> Element {
             },
             "hsl({hue}, 70%, {brightness}%)"
         }
-    })
+    }
 }

packages/dioxus-tui/examples/flex.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -78,5 +78,5 @@ fn app() -> Element {
                 "asd"
             }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/hover.rs

@@ -23,20 +23,20 @@ fn app() -> Element {
         127 * b
     }
 
-    let q1_color = use_state(|| [200; 3]);
+    let q1_color = use_signal(|| [200; 3]);
-    let q2_color = use_state(|| [200; 3]);
+    let q2_color = use_signal(|| [200; 3]);
-    let q3_color = use_state(|| [200; 3]);
+    let q3_color = use_signal(|| [200; 3]);
-    let q4_color = use_state(|| [200; 3]);
+    let q4_color = use_signal(|| [200; 3]);
 
     let q1_color_str = to_str(q1_color);
     let q2_color_str = to_str(q2_color);
     let q3_color_str = to_str(q3_color);
     let q4_color_str = to_str(q4_color);
 
-    let page_coordinates = use_state(|| "".to_string());
+    let page_coordinates = use_signal(|| "".to_string());
-    let element_coordinates = use_state(|| "".to_string());
+    let element_coordinates = use_signal(|| "".to_string());
-    let buttons = use_state(|| "".to_string());
+    let buttons = use_signal(|| "".to_string());
-    let modifiers = use_state(|| "".to_string());
+    let modifiers = use_signal(|| "".to_string());
 
     let update_data = move |event: Event<MouseData>| {
         let mouse_data = event.inner();
@@ -51,7 +51,7 @@ fn app() -> Element {
         modifiers.set(format!("{:?}", mouse_data.modifiers()));
     };
 
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -129,5 +129,5 @@ fn app() -> Element {
             div { "Buttons: {buttons}" }
             div { "Modifiers: {modifiers}" }
         }
-    })
+    }
 }

packages/dioxus-tui/examples/list.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app() -> Element {
-    cx.render(rsx! {
+    rsx! {
         div {
             width: "100%",
             height: "100%",
@@ -24,5 +24,5 @@ fn app() -> Element {
                 }
             }
         }
-    })
+    }
 }