docs: update local examples and docs to support new syntaxes

examples/README.md

@@ -72,7 +72,7 @@ fn App(cx: Context, props: &()) -> Element {
 struct ToggleProps { children: Element }
 
 fn Toggle(cx: Context, props: &ToggleProps) -> Element {
-  let mut toggled = use_state(cx, || false);
+  let mut toggled = use_state(&cx, || false);
   cx.render(rsx!{
     div {
       {&props.children}
@@ -87,7 +87,7 @@ fn Toggle(cx: Context, props: &ToggleProps) -> Element {
 Controlled inputs:
 ```rust
 fn App(cx: Context, props: &()) -> Element {
-  let value = use_state(cx, String::new);
+  let value = use_state(&cx, String::new);
   cx.render(rsx!( 
     input {
       "type": "text",
@@ -123,13 +123,13 @@ fn App(cx: Context, props: &()) -> Element {
 
 Tiny components:
 ```rust
-static App: FC<()> = |cx, _| rsx!(cx, div {"hello world!"});
+static App: Component<()> = |cx, _| rsx!(cx, div {"hello world!"});
 ```
 
 Borrowed prop contents:
 ```rust
 fn App(cx: Context, props: &()) -> Element {
-  let name = use_state(cx, || String::from("example"));
+  let name = use_state(&cx, || String::from("example"));
   rsx!(cx, Child { title: name.as_str() })
 }
 
@@ -137,7 +137,7 @@ fn App(cx: Context, props: &()) -> Element {
 struct ChildProps<'a> { title: &'a str }
 
 fn Child(cx: Context, props: &ChildProps) -> Element {
-  rsx!(cx, "Hello {props.title}")
+  rsx!(cx, "Hello {cx.props.title}")
 }
 ```
 

examples/async.rs

@@ -8,12 +8,12 @@ use gloo_timers::future::TimeoutFuture;
 
 #[tokio::main]
 async fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
-pub static App: Component<()> = |cx, _| {
-    let count = use_state(cx, || 0);
-    let mut direction = use_state(cx, || 1);
+pub static App: Component<()> = |cx| {
+    let count = use_state(&cx, || 0);
+    let mut direction = use_state(&cx, || 1);
 
     let (async_count, dir) = (count.for_async(), *direction);
 

examples/borrowed.rs

@@ -17,10 +17,10 @@ and is proven to be safe with MIRI.
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
-fn App(cx: Scope, props: &()) -> Element {
+fn App(cx: Scope<()>) -> Element {
     let text: &mut Vec<String> = cx.use_hook(|_| vec![String::from("abc=def")], |f| f);
 
     let first = text.get_mut(0).unwrap();
@@ -39,7 +39,7 @@ struct C1Props<'a> {
     text: &'a mut String,
 }
 
-fn Child1(cx: Scope, props: &C1Props) -> Element {
+fn Child1<'a>(cx: Scope<'a, C1Props<'a>>) -> Element {
     let (left, right) = props.text.split_once("=").unwrap();
 
     cx.render(rsx! {
@@ -55,7 +55,7 @@ struct C2Props<'a> {
     text: &'a str,
 }
 
-fn Child2(cx: Scope, props: &C2Props) -> Element {
+fn Child2<'a>(cx: Scope<'a, C2Props<'a>>) -> Element {
     cx.render(rsx! {
         Child3 {
             text: props.text
@@ -68,8 +68,8 @@ struct C3Props<'a> {
     text: &'a str,
 }
 
-fn Child3(cx: Scope, props: &C3Props) -> Element {
+fn Child3<'a>(cx: Scope<'a, C3Props<'a>>) -> Element {
     cx.render(rsx! {
-        div { "{props.text}"}
+        div { "{cx.props.text}"}
     })
 }

examples/calculator.rs

@@ -10,13 +10,13 @@ use dioxus::prelude::*;
 use separator::Separatable;
 
 fn main() {
-    dioxus::desktop::launch(APP, |cfg| cfg);
+    dioxus::desktop::launch(APP);
 }
 
-const APP: Component<()> = |cx, _| {
-    let cur_val = use_state(cx, || 0.0_f64);
-    let operator = use_state(cx, || None as Option<&'static str>);
-    let display_value = use_state(cx, || String::from(""));
+static APP: Component<()> = |cx| {
+    let cur_val = use_state(&cx, || 0.0_f64);
+    let operator = use_state(&cx, || None as Option<&'static str>);
+    let display_value = use_state(&cx, || String::from(""));
 
     let toggle_percent = move |_| todo!();
     let input_digit = move |num: u8| display_value.modify().push_str(num.to_string().as_str());
@@ -117,13 +117,13 @@ const APP: Component<()> = |cx, _| {
 struct CalculatorKeyProps<'a> {
     name: &'static str,
     onclick: &'a dyn Fn(Arc<MouseEvent>),
-    children: Element,
+    children: Element<'a>,
 }
 
-fn CalculatorKey<'a>(cx: Scope, props: &CalculatorKeyProps) -> Element {
+fn CalculatorKey<'a>(cx: Scope<'a, CalculatorKeyProps<'a>>) -> Element {
     rsx!(cx, button {
-        class: "calculator-key {props.name}"
-        onclick: {props.onclick}
+        class: "calculator-key {cx.props.name}"
+        onclick: {cx.props.onclick}
         {&props.children}
     })
 }

examples/core/alternative.rs

@@ -9,7 +9,7 @@ fn main() {
     println!("{}", dom);
 }
 
-pub static EXAMPLE: FC<()> = |cx, _| {
+pub static EXAMPLE: Component<()> = |cx| {
     let list = (0..10).map(|_f| {
         rsx! {
             "{_f}"

examples/core/async.rs

@@ -5,7 +5,7 @@ fn main() {
     dom.rebuild();
 }
 
-const App: FC<()> = |cx, props| {
+const App: Component<()> = |cx| {
     let id = cx.scope_id();
     // cx.submit_task(Box::pin(async move { id }));
 

examples/core/contextapi.rs

@@ -6,7 +6,7 @@ struct SomeContext {
 }
 
 #[allow(unused)]
-static Example: FC<()> = |cx, props| {
+static Example: Component<()> = |cx| {
     todo!()
 
     // let value = cx.use_context(|c: &SomeContext| c.items.last().unwrap());

examples/core/jsframework.rs

@@ -47,9 +47,9 @@ fn Row<'a>((cx, props): Scope<'a, RowProps>) -> Element<'a> {
     };
     cx.render(rsx! {
         tr {
-            // td { class:"col-md-1", "{props.row_id}" }
+            // td { class:"col-md-1", "{cx.props.row_id}" }
             // td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
-            //     a { class: "lbl", "{props.label}" }
+            //     a { class: "lbl", "{cx.props.label}" }
             // }
             // td { class: "col-md-1"
             //     a { class: "remove", onclick: {handler}

examples/core/syntax.rs

@@ -31,9 +31,9 @@ fn html_usage() {
     // let p = rsx!(div { {f} });
 }
 
-static App2: FC<()> = |cx, _| cx.render(rsx!("hello world!"));
+static App2: Component<()> = |cx, _| cx.render(rsx!("hello world!"));
 
-static App: FC<()> = |cx, props| {
+static App: Component<()> = |cx| {
     let name = cx.use_state(|| 0);
 
     cx.render(rsx!(div {
@@ -71,7 +71,7 @@ struct ChildProps {
 
 fn Child<'a>((cx, props): Scope<'a, ChildProps>) -> Element<'a> {
     cx.render(rsx!(div {
-        // {props.children}
+        // {cx.props.children}
     }))
 }
 
@@ -99,7 +99,7 @@ impl<'a> Children<'a> {
     }
 }
 
-static Bapp: FC<()> = |cx, props| {
+static Bapp: Component<()> = |cx| {
     let name = cx.use_state(|| 0);
 
     cx.render(rsx!(
@@ -114,7 +114,7 @@ static Bapp: FC<()> = |cx, props| {
     ))
 };
 
-static Match: FC<()> = |cx, props| {
+static Match: Component<()> = |cx| {
     //
     let b: Box<dyn Fn(NodeFactory) -> VNode> = Box::new(|f| todo!());
 

examples/core/syntax2.rs

@@ -40,7 +40,7 @@ fn t() {
 //     let a = rsx! {
 //         div {
 //             "asd"
-//             "{props.foo}"
+//             "{cx.props.foo}"
 //         }
 //     };
 

examples/core/vdom_usage.rs

@@ -4,7 +4,7 @@ use dioxus_core::{lazynodes::LazyNodes, prelude::*};
 
 // #[async_std::main]
 fn main() {
-    static App: FC<()> =
+    static App: Component<()> =
         |cx, props| cx.render(Some(LazyNodes::new(move |f| f.text(format_args!("hello")))));
 
     let mut dom = VirtualDom::new(App);

examples/core_reference/antipatterns.rs

@@ -32,14 +32,14 @@ use dioxus::prelude::*;
 struct NoKeysProps {
     data: std::collections::HashMap<u32, String>,
 }
-static AntipatternNoKeys: FC<NoKeysProps> = |cx, props| {
+static AntipatternNoKeys: Component<NoKeysProps> = |cx| {
     // WRONG: Make sure to add keys!
     rsx!(cx, ul {
-        {props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))}
+        {cx.props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))}
     });
     // RIGHT: Like this:
     rsx!(cx, ul {
-        {props.data.iter().map(|(k, v)| rsx!(li { key: "{k}", "List item: {v}" }))}
+        {cx.props.data.iter().map(|(k, v)| rsx!(li { key: "{k}", "List item: {v}" }))}
     })
 };
 
@@ -54,7 +54,7 @@ static AntipatternNoKeys: FC<NoKeysProps> = |cx, props| {
 ///
 /// Only Component and Fragment nodes are susceptible to this issue. Dioxus mitigates this with components by providing
 /// an API for registering shared state without the ContextProvider pattern.
-static AntipatternNestedFragments: FC<()> = |cx, props| {
+static AntipatternNestedFragments: Component<()> = |cx| {
     // Try to avoid heavily nesting fragments
     rsx!(cx,
         Fragment {
@@ -82,8 +82,8 @@ static AntipatternNestedFragments: FC<()> = |cx, props| {
 /// However, calling set_state will *not* update the current version of state in the component. This should be easy to
 /// recognize from the function signature, but Dioxus will not update the "live" version of state. Calling `set_state`
 /// merely places a new value in the queue and schedules the component for a future update.
-static AntipatternRelyingOnSetState: FC<()> = |cx, props| {
-    let (state, set_state) = use_state(cx, || "Hello world").classic();
+static AntipatternRelyingOnSetState: Component<()> = |cx| {
+    let (state, set_state) = use_state(&cx, || "Hello world").classic();
     set_state("New state");
     // This will return false! `state` will *still* be "Hello world"
     assert!(state == &"New state");
@@ -99,7 +99,7 @@ static AntipatternRelyingOnSetState: FC<()> = |cx, props| {
 /// - All components must start with an uppercase character
 ///
 /// i.e.: the following component will be rejected when attempted to be used in the rsx! macro
-static antipattern_component: FC<()> = |cx, props| todo!();
+static antipattern_component: Component<()> = |cx, props| todo!();
 
 /// Antipattern: Misusing hooks
 /// ---------------------------
@@ -120,11 +120,11 @@ static antipattern_component: FC<()> = |cx, props| todo!();
 struct MisuedHooksProps {
     should_render_state: bool,
 }
-static AntipatternMisusedHooks: FC<MisuedHooksProps> = |cx, props| {
+static AntipatternMisusedHooks: Component<MisuedHooksProps> = |cx| {
     if props.should_render_state {
         // do not place a hook in the conditional!
         // prefer to move it out of the conditional
-        let (state, set_state) = use_state(cx, || "hello world").classic();
+        let (state, set_state) = use_state(&cx, || "hello world").classic();
         rsx!(cx, div { "{state}" })
     } else {
         rsx!(cx, div { "Not rendering state" })
@@ -153,7 +153,7 @@ static AntipatternMisusedHooks: FC<MisuedHooksProps> = |cx, props| {
 ///         }
 ///     }
 /// })
-static _example: FC<()> = |cx, props| todo!();
+static _example: Component<()> = |cx, props| todo!();
 
 /// Antipattern: publishing components and hooks with all features enabled
 /// ----------------------------------------------------------------------
@@ -171,9 +171,9 @@ static _example: FC<()> = |cx, props| todo!();
 ///
 /// This will only include the `core` dioxus crate which is relatively slim and fast to compile and avoids target-specific
 /// libraries.
-static __example: FC<()> = |cx, props| todo!();
+static __example: Component<()> = |cx, props| todo!();
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         AntipatternNoKeys { data: std::collections::HashMap::new() }
         AntipatternNestedFragments {}

examples/core_reference/basics.rs

@@ -9,7 +9,7 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             Greeting {
@@ -25,10 +25,10 @@ struct GreetingProps {
     name: &'static str,
 }
 
-static Greeting: FC<GreetingProps> = |cx, props| {
+static Greeting: Component<GreetingProps> = |cx| {
     cx.render(rsx! {
         div {
-            h1 { "Hello, {props.name}!" }
+            h1 { "Hello, {cx.props.name}!" }
             p { "Welcome to the Dioxus framework" }
             br {}
             {cx.children()}

examples/core_reference/children.rs

@@ -18,7 +18,7 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             Banner {
@@ -31,7 +31,7 @@ pub static Example: FC<()> = |cx, props| {
     })
 };
 
-pub static Banner: FC<()> = |cx, props| {
+pub static Banner: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             h1 { "This is a great banner!" }

examples/core_reference/conditional_rendering.rs

@@ -16,10 +16,10 @@ use dioxus::prelude::*;
 pub struct MyProps {
     should_show: bool,
 }
-pub static Example0: FC<MyProps> = |cx, props| {
+pub static Example0: Component<MyProps> = |cx| {
     cx.render(rsx! {
         div {
-            {props.should_show.then(|| rsx!{
+            {cx.props.should_show.then(|| rsx!{
                 h1 { "showing the title!" }
             })}
         }
@@ -39,7 +39,7 @@ pub static Example0: FC<MyProps> = |cx, props| {
 pub struct MyProps1 {
     should_show: bool,
 }
-pub static Example1: FC<MyProps1> = |cx, props| {
+pub static Example1: Component<MyProps1> = |cx| {
     cx.render(rsx! {
         div {
             // With matching
@@ -77,7 +77,7 @@ pub enum Color {
 pub struct MyProps2 {
     color: Color,
 }
-pub static Example2: FC<MyProps2> = |cx, props| {
+pub static Example2: Component<MyProps2> = |cx| {
     cx.render(rsx! {
         div {
             {match props.color {
@@ -89,9 +89,9 @@ pub static Example2: FC<MyProps2> = |cx, props| {
     })
 };
 
-pub static Example: FC<()> = |cx, props| {
-    let should_show = use_state(cx, || false);
-    let mut color_index = use_state(cx, || 0);
+pub static Example: Component<()> = |cx| {
+    let should_show = use_state(&cx, || false);
+    let mut color_index = use_state(&cx, || 0);
     let color = match *color_index % 2 {
         2 => Color::Green,
         1 => Color::Yellow,

examples/core_reference/controlled_inputs.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 fn main() {}
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
 
@@ -10,8 +10,8 @@ pub static Example: FC<()> = |cx, props| {
 };
 
 // A controlled component:
-static ControlledSelect: FC<()> = |cx, props| {
-    let value = use_state(cx, || String::from("Grapefruit"));
+static ControlledSelect: Component<()> = |cx| {
+    let value = use_state(&cx, || String::from("Grapefruit"));
     cx.render(rsx! {
         select { value: "{value}", onchange: move |evt| value.set(evt.value()),
             option { value: "Grapefruit", "Grapefruit"}
@@ -23,8 +23,8 @@ static ControlledSelect: FC<()> = |cx, props| {
 };
 
 // TODO - how do uncontrolled things work?
-static UncontrolledSelect: FC<()> = |cx, props| {
-    let value = use_state(cx, || String::new());
+static UncontrolledSelect: Component<()> = |cx| {
+    let value = use_state(&cx, || String::new());
 
     cx.render(rsx! {
         select {

examples/core_reference/custom_elements.rs

@@ -11,7 +11,7 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             custom_element {

examples/core_reference/empty.rs

@@ -5,4 +5,4 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| cx.render(rsx! { Fragment {} });
+pub static Example: Component<()> = |cx, props| cx.render(rsx! { Fragment {} });

examples/core_reference/errorhandling.rs

@@ -23,14 +23,14 @@ fn main() {}
 /// This is one way to go about error handling (just toss things away with unwrap).
 /// However, if you get it wrong, the whole app will crash.
 /// This is pretty flimsy.
-static App: FC<()> = |cx, props| {
+static App: Component<()> = |cx| {
     let data = get_data().unwrap();
     cx.render(rsx!( div { "{data}" } ))
 };
 
 /// This is a pretty verbose way of error handling
 /// However, it's still pretty good since we don't panic, just fail to render anything
-static App1: FC<()> = |cx, props| {
+static App1: Component<()> = |cx| {
     let data = match get_data() {
         Some(data) => data,
         None => return None,
@@ -46,7 +46,7 @@ static App1: FC<()> = |cx, props| {
 /// a user is logged in.
 ///
 /// Dioxus will throw an error in the console if the None-path is ever taken.
-static App2: FC<()> = |cx, props| {
+static App2: Component<()> = |cx| {
     let data = get_data()?;
     cx.render(rsx!( div { "{data}" } ))
 };
@@ -54,14 +54,14 @@ static App2: FC<()> = |cx, props| {
 /// This is top-tier error handling since it displays a failure state.
 ///
 /// However, the error is lacking in context.
-static App3: FC<()> = |cx, props| match get_data() {
+static App3: Component<()> = |cx, props| match get_data() {
     Some(data) => cx.render(rsx!( div { "{data}" } )),
     None => cx.render(rsx!( div { "Failed to load data :(" } )),
 };
 
 /// For errors that return results, it's possible to short-circuit the match-based error handling with `.ok()` which converts
 /// a Result<T, V> into an Option<T> and lets you abort rendering by early-returning `None`
-static App4: FC<()> = |cx, props| {
+static App4: Component<()> = |cx| {
     let data = get_data_err().ok()?;
     cx.render(rsx!( div { "{data}" } ))
 };
@@ -69,7 +69,7 @@ static App4: FC<()> = |cx, props| {
 /// This is great error handling since it displays a failure state... with context!
 ///
 /// Hopefully you'll never need to display a screen like this. It's rather bad taste
-static App5: FC<()> = |cx, props| match get_data_err() {
+static App5: Component<()> = |cx, props| match get_data_err() {
     Ok(data) => cx.render(rsx!( div { "{data}" } )),
     Err(c) => cx.render(rsx!( div { "Failed to load data: {c}" } )),
 };

examples/core_reference/fragments.rs

@@ -11,7 +11,7 @@
 use dioxus::prelude::*;
 
 // Returning multiple elements with rsx! or html!
-static App1: FC<()> = |cx, props| {
+static App1: Component<()> = |cx| {
     cx.render(rsx! {
         h1 { }
         h2 { }
@@ -20,7 +20,7 @@ static App1: FC<()> = |cx, props| {
 };
 
 // Using the Fragment component
-static App2: FC<()> = |cx, props| {
+static App2: Component<()> = |cx| {
     cx.render(rsx! {
         Fragment {
             div {}
@@ -31,7 +31,7 @@ static App2: FC<()> = |cx, props| {
 };
 
 // Using the `fragment` method on the NodeFactory
-static App3: FC<()> = |cx, props| {
+static App3: Component<()> = |cx| {
     cx.render(LazyNodes::new(move |fac| {
         fac.fragment_from_iter([
             fac.text(format_args!("A")),
@@ -42,7 +42,7 @@ static App3: FC<()> = |cx, props| {
     }))
 };
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         App1 {}
         App2 {}

examples/core_reference/global_css.rs

@@ -19,7 +19,7 @@ h1   {color: blue;}
 p    {color: red;}
 "#;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         head { style { "{STYLE}" } }
         body {

examples/core_reference/inline_styles.rs

@@ -10,7 +10,7 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         head {
             style: { background_color: "powderblue" }
@@ -29,7 +29,7 @@ pub static Example: FC<()> = |cx, props| {
 // .... technically the rsx! macro is slightly broken at the moment and allows styles not wrapped in style {}
 // I haven't noticed any name collisions yet, and am tentatively leaving this behavior in..
 // Don't rely on it.
-static Example2: FC<()> = |cx, props| {
+static Example2: Component<()> = |cx| {
     cx.render(rsx! {
         div { color: "red"
             "hello world!"

examples/core_reference/iterators.rs

@@ -12,8 +12,8 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
-    let example_data = use_state(cx, || 0);
+pub static Example: Component<()> = |cx| {
+    let example_data = use_state(&cx, || 0);
 
     let v = (0..10).map(|f| {
         rsx! {

examples/core_reference/listener.rs

@@ -7,7 +7,7 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         ButtonList {}
         NonUpdatingEvents {}
@@ -16,8 +16,8 @@ pub static Example: FC<()> = |cx, props| {
 };
 
 /// We can use `set_name` in multiple closures; the closures automatically *copy* the reference to set_name.
-static ButtonList: FC<()> = |cx, props| {
-    let name = use_state(cx, || "...?");
+static ButtonList: Component<()> = |cx| {
+    let name = use_state(&cx, || "...?");
 
     let names = ["jack", "jill", "john", "jane"]
         .iter()
@@ -33,7 +33,7 @@ static ButtonList: FC<()> = |cx, props| {
 
 /// This shows how listeners may be without a visible change in the display.
 /// Check the console.
-static NonUpdatingEvents: FC<()> = |cx, props| {
+static NonUpdatingEvents: Component<()> = |cx| {
     rsx!(cx, div {
         button {
             onclick: move |_| log::info!("Did not cause any updates!")
@@ -42,7 +42,7 @@ static NonUpdatingEvents: FC<()> = |cx, props| {
     })
 };
 
-static DisablePropagation: FC<()> = |cx, props| {
+static DisablePropagation: Component<()> = |cx| {
     rsx!(cx,
         div {
             onclick: move |_| log::info!("event propagated to the div!")

examples/core_reference/memo.rs

@@ -21,7 +21,7 @@ use dioxus::prelude::*;
 
 // By default, components with no props are always memoized.
 // A props of () is considered empty.
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div { "100% memoized!" }
     })
@@ -35,9 +35,9 @@ pub struct MyProps1 {
     name: String,
 }
 
-pub static Example1: FC<MyProps1> = |cx, props| {
+pub static Example1: Component<MyProps1> = |cx| {
     cx.render(rsx! {
-        div { "100% memoized! {props.name}" }
+        div { "100% memoized! {cx.props.name}" }
     })
 };
 
@@ -49,9 +49,9 @@ pub struct MyProps2 {
     name: std::rc::Rc<str>,
 }
 
-pub static Example2: FC<MyProps2> = |cx, props| {
+pub static Example2: Component<MyProps2> = |cx| {
     cx.render(rsx! {
-        div { "100% memoized! {props.name}" }
+        div { "100% memoized! {cx.props.name}" }
     })
 };
 
@@ -61,11 +61,11 @@ pub struct MyProps3<'a> {
     name: &'a str,
 }
 // We need to manually specify a lifetime that ensures props and scope (the component's state) share the same lifetime.
-// Using the `pub static Example: FC<()>` pattern _will_ specify a lifetime, but that lifetime will be static which might
+// Using the `pub static Example: Component<()>` pattern _will_ specify a lifetime, but that lifetime will be static which might
 // not exactly be what you want
 fn Example3<'a>(cx: Context<'a>, props: &'a MyProps3) -> DomTree<'a> {
     cx.render(rsx! {
-        div { "Not memoized! {props.name}" }
+        div { "Not memoized! {cx.props.name}" }
     })
 }
 

examples/core_reference/noderefs.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 fn main() {}
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     let p = 10;
 
     cx.render(rsx! {

examples/core_reference/signals.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 fn main() {}
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
 

examples/core_reference/spreadpattern.rs

@@ -9,7 +9,7 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     let props = MyProps {
         count: 0,
         live: true,
@@ -27,7 +27,7 @@ pub struct MyProps {
     name: &'static str,
 }
 
-pub static Example1: FC<MyProps> = |cx, MyProps { count, live, name }| {
+pub static Example1: Component<MyProps> = |cx, MyProps { count, live, name }| {
     cx.render(rsx! {
         div {
             h1 { "Hello, {name}"}

examples/core_reference/statemanagement.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 fn main() {}
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
 

examples/core_reference/suspense.rs

@@ -14,7 +14,7 @@ struct DogApi {
 }
 const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random";
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     let doggo = use_suspense(
         cx,
         || surf::get(ENDPOINT).recv_json::<DogApi>(),

examples/core_reference/task.rs

@@ -24,9 +24,9 @@
 
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
-    let count = use_state(cx, || 0);
-    let mut direction = use_state(cx, || 1);
+pub static Example: Component<()> = |cx| {
+    let count = use_state(&cx, || 0);
+    let mut direction = use_state(&cx, || 1);
 
     // Tasks are 'static, so we need to copy relevant items in
     let (async_count, dir) = (count.for_async(), *direction);

examples/core_reference/testing.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-pub static Example: FC<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     cx.render(rsx! {
         div {
 

examples/core_reference/tostring.rs

@@ -1,13 +1,13 @@
 use dioxus::prelude::*;
 use dioxus::ssr;
 
-pub static Example: FC<()> = |cx, props| {
-    let as_string = use_state(cx, || {
+pub static Example: Component<()> = |cx| {
+    let as_string = use_state(&cx, || {
         // Currently, SSR is only supported for whole VirtualDOMs
         // This is an easy/low hanging fruit to improve upon
         let mut dom = VirtualDom::new(SomeApp);
         dom.rebuild();
-        ssr::render_vdom(&dom, |c| c)
+        ssr::render_vdom(&dom)
     });
 
     cx.render(rsx! {
@@ -15,7 +15,7 @@ pub static Example: FC<()> = |cx, props| {
     })
 };
 
-static SomeApp: FC<()> = |cx, props| {
+static SomeApp: Component<()> = |cx| {
     cx.render(rsx! {
         div { style: {background_color: "blue"}
             h1 {"Some amazing app or component"}

examples/coroutine.rs

@@ -22,14 +22,14 @@
 //! the coroutine was initiated. `use_state` always returns the same setter, so you don't need to worry about
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 use dioxus::prelude::*;
 
-static App: Component<()> = |cx, props| {
-    let p1 = use_state(cx, || 0);
-    let p2 = use_state(cx, || 0);
+static App: Component<()> = |cx| {
+    let p1 = use_state(&cx, || 0);
+    let p2 = use_state(&cx, || 0);
 
     let (mut p1_async, mut p2_async) = (p1.for_async(), p2.for_async());
     let (p1_handle, _) = use_coroutine(cx, || async move {

examples/crm.rs

@@ -4,7 +4,7 @@ Tiny CRM: A port of the Yew CRM example to Dioxus.
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::web::launch(App, |c| c);
+    dioxus::web::launch(App);
 }
 enum Scene {
     ClientsList,
@@ -19,13 +19,13 @@ pub struct Client {
     pub description: String,
 }
 
-static App: Component<()> = |cx, _| {
-    let mut clients = use_ref(cx, || vec![] as Vec<Client>);
-    let mut scene = use_state(cx, || Scene::ClientsList);
+static App: Component<()> = |cx| {
+    let mut clients = use_ref(&cx, || vec![] as Vec<Client>);
+    let mut scene = use_state(&cx, || Scene::ClientsList);
 
-    let mut firstname = use_state(cx, || String::new());
-    let mut lastname = use_state(cx, || String::new());
-    let mut description = use_state(cx, || String::new());
+    let mut firstname = use_state(&cx, || String::new());
+    let mut lastname = use_state(&cx, || String::new());
+    let mut description = use_state(&cx, || String::new());
 
     let scene = match *scene {
         Scene::ClientsList => {

examples/desktop/crm.rs

@@ -5,7 +5,7 @@ use dioxus_hooks::*;
 use dioxus_html as dioxus_elements;
 
 fn main() {
-    dioxus_desktop::launch(App, |c| c)
+    dioxus_desktop::launch(App)
 }
 
 enum Scene {
@@ -21,13 +21,13 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |cx, _| {
-    let mut scene = use_state(cx, || Scene::ClientsList);
-    let clients = use_ref(cx, || vec![] as Vec<Client>);
+static App: Component<()> = |cx| {
+    let mut scene = use_state(&cx, || Scene::ClientsList);
+    let clients = use_ref(&cx, || vec![] as Vec<Client>);
 
-    let mut firstname = use_state(cx, String::new);
-    let mut lastname = use_state(cx, String::new);
-    let mut description = use_state(cx, String::new);
+    let mut firstname = use_state(&cx, String::new);
+    let mut lastname = use_state(&cx, String::new);
+    let mut description = use_state(&cx, String::new);
 
     let scene = match scene.get() {
         Scene::ClientsList => {

examples/desktop/demo.rs

@@ -5,10 +5,10 @@ use dioxus_core_macro::*;
 use dioxus_html as dioxus_elements;
 
 fn main() {
-    dioxus_desktop::launch(App, |c| c);
+    dioxus_desktop::launch(App);
 }
 
-static App: FC<()> = |cx, props| {
+static App: Component<()> = |cx| {
     cx.render(rsx!(
         div {
             "hello world!"

examples/desktop/todomvc.rs

@@ -14,7 +14,7 @@ fn main() {
         SimpleLogger::new().init().unwrap();
     }
 
-    dioxus_desktop::launch(App, |c| c)
+    dioxus_desktop::launch(App)
 }
 
 #[derive(PartialEq)]
@@ -32,14 +32,14 @@ pub struct TodoItem {
 }
 pub type Todos = HashMap<u32, TodoItem>;
 
-pub static App: FC<()> = |cx, _| {
+pub static App: Component<()> = |cx| {
     // Share our TodoList to the todos themselves
     use_provide_state(cx, Todos::new);
 
     // Save state for the draft, filter
-    let draft = use_state(cx, || "".to_string());
-    let filter = use_state(cx, || FilterState::All);
-    let mut todo_id = use_state(cx, || 0);
+    let draft = use_state(&cx, || "".to_string());
+    let filter = use_state(&cx, || FilterState::All);
+    let mut todo_id = use_state(&cx, || 0);
 
     // Consume the todos
     let todos = use_shared_state::<Todos>(cx)?;
@@ -142,7 +142,7 @@ pub fn TodoEntry((cx, props): Scope<TodoEntryProps>) -> Element {
     let _todos = todos.read();
     let todo = _todos.get(&props.id)?;
 
-    let is_editing = use_state(cx, || false);
+    let is_editing = use_state(&cx, || false);
     let completed = if todo.checked { "completed" } else { "" };
 
     cx.render(rsx!{

examples/file_explorer.rs

@@ -9,7 +9,7 @@ use dioxus::prelude::*;
 
 fn main() {
     simple_logger::init_with_level(log::Level::Debug);
-    dioxus::desktop::launch(App, |c| {
+    dioxus::desktop::launch_cfg(App, |c| {
         c.with_window(|w| {
             w.with_resizable(true).with_inner_size(
                 dioxus::desktop::wry::application::dpi::LogicalSize::new(400.0, 800.0),
@@ -18,8 +18,8 @@ fn main() {
     });
 }
 
-static App: Component<()> = |cx, props| {
-    let file_manager = use_ref(cx, || Files::new());
+static App: Component<()> = |cx| {
+    let file_manager = use_ref(&cx, Files::new);
     let files = file_manager.read();
 
     let file_list = files.path_names.iter().enumerate().map(|(dir_id, path)| {
@@ -39,13 +39,15 @@ static App: Component<()> = |cx, props| {
 
     let current_dir = files.current();
 
-    rsx!(cx, div {
-        h1 {"Files: "}
-        h3 {"Cur dir: {current_dir}"}
-        button { "go up", onclick: move |_| file_manager.write().go_up() }
-        ol { {file_list} }
-        {err_disp}
-    })
+    cx.render(rsx!(
+        div {
+            h1 {"Files: "}
+            h3 {"Cur dir: {current_dir}"}
+            button { "go up", onclick: move |_| file_manager.write().go_up() }
+            ol { {file_list} }
+            {err_disp}
+        }
+    ))
 };
 
 struct Files {

examples/framework_benchmark.rs

@@ -2,8 +2,8 @@ use dioxus::prelude::*;
 use rand::prelude::*;
 
 fn main() {
-    dioxus::web::launch(App, |c| c);
-    // dioxus::desktop::launch(App, |c| c);
+    dioxus::web::launch(App);
+    // dioxus::desktop::launch(App);
 }
 
 #[derive(Clone, PartialEq)]
@@ -30,9 +30,9 @@ impl Label {
     }
 }
 
-static App: Component<()> = |cx, _props| {
-    let mut items = use_ref(cx, || vec![]);
-    let mut selected = use_state(cx, || None);
+static App: Component<()> = |cx| {
+    let mut items = use_ref(&cx, || vec![]);
+    let mut selected = use_state(&cx, || None);
 
     cx.render(rsx! {
         div { class: "container"
@@ -95,10 +95,10 @@ struct ActionButtonProps<'a> {
     onclick: &'a dyn Fn(),
 }
 
-fn ActionButton(cx: Scope, props: &ActionButtonProps) -> Element {
+fn ActionButton<'a>(cx: Scope<'a, ActionButtonProps<'a>>) -> Element {
     rsx!(cx, div { class: "col-sm-6 smallpad"
-        button { class:"btn btn-primary btn-block", r#type: "button", id: "{props.id}",  onclick: move |_| (props.onclick)(),
-            "{props.name}"
+        button { class:"btn btn-primary btn-block", r#type: "button", id: "{cx.props.id}",  onclick: move |_| (props.onclick)(),
+            "{cx.props.name}"
         }
     })
 }
@@ -149,9 +149,9 @@ static NOUNS: &[&str] = &[
 
 // fn Row(cx: Context, props: &RowProps) -> Element {
 //     rsx!(cx, tr {
-//         td { class:"col-md-1", "{props.row_id}" }
+//         td { class:"col-md-1", "{cx.props.row_id}" }
 //         td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
-//             a { class: "lbl", {props.label.labels} }
+//             a { class: "lbl", {cx.props.label.labels} }
 //         }
 //         td { class: "col-md-1"
 //             a { class: "remove", onclick: move |_| {/* remove */}

examples/hello_world.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 fn App((cx, props): ScopeState<()>) -> Element {

examples/hydration.rs

@@ -19,8 +19,8 @@ fn main() {
     dioxus::desktop::launch(App, |c| c.with_prerendered(content));
 }
 
-static App: Component<()> = |cx, props| {
-    let mut val = use_state(cx, || 0);
+static App: Component<()> = |cx| {
+    let mut val = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {

examples/pattern_model.rs

@@ -16,13 +16,13 @@
 //! RefMuts at the same time.
 
 use dioxus::desktop::wry::application::dpi::LogicalSize;
-use dioxus::events::{on::*, KeyCode};
+use dioxus::events::*;
 use dioxus::prelude::*;
 
 const STYLE: &str = include_str!("./assets/calculator.css");
 fn main() {
     env_logger::init();
-    dioxus::desktop::launch(App, |cfg| {
+    dioxus::desktop::launch_cfg(App, |cfg| {
         cfg.with_window(|w| {
             w.with_title("Calculator Demo")
                 .with_resizable(false)
@@ -31,8 +31,8 @@ fn main() {
     });
 }
 
-static App: Component<()> = |cx, props| {
-    let state = use_ref(cx, || Calculator::new());
+static App: Component<()> = |cx| {
+    let state = use_ref(&cx, || Calculator::new());
 
     let clear_display = state.read().display_value.eq("0");
     let clear_text = if clear_display { "C" } else { "AC" };
@@ -80,8 +80,8 @@ struct CalculatorKeyProps<'a> {
 fn CalculatorKey<'a>((cx, props): ScopeState<'a, CalculatorKeyProps<'a>>) -> Element<'a> {
     cx.render(rsx! {
         button {
-            class: "calculator-key {props.name}"
-            onclick: {props.onclick}
+            class: "calculator-key {cx.props.name}"
+            onclick: {cx.props.onclick}
             {&props.children}
         }
     })

examples/pattern_reducer.rs

@@ -8,11 +8,11 @@
 use dioxus::prelude::*;
 fn main() {
     env_logger::init();
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
-pub static App: Component<()> = |cx, _| {
-    let state = use_state(cx, PlayerState::new);
+pub static App: Component<()> = |cx| {
+    let state = use_state(&cx, PlayerState::new);
 
     let is_playing = state.is_playing();
 

examples/readme.rs

@@ -4,11 +4,11 @@
 
 use dioxus::prelude::*;
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
-static App: Component<()> = |cx, props| {
-    let mut count = use_state(cx, || 0);
+static App: Component<()> = |cx| {
+    let mut count = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {

examples/router.rs

@@ -23,7 +23,7 @@ pub enum Route {
     NotFound,
 }
 
-static App: Component<()> = |cx, props| {
+static App: Component<()> = |cx| {
     let route = use_router(cx, Route::parse)?;
 
     cx.render(rsx! {

examples/rsx_usage.rs

@@ -39,7 +39,7 @@
 //! - Allow top-level fragments
 //!
 fn main() {
-    dioxus::desktop::launch(Example, |c| c);
+    dioxus::desktop::launch(Example);
 }
 
 /// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad.
@@ -49,7 +49,7 @@ const NONE_ELEMENT: Option<()> = None;
 use baller::Baller;
 use dioxus::prelude::*;
 
-pub static Example: Component<()> = |cx, props| {
+pub static Example: Component<()> = |cx| {
     let formatting = "formatting!";
     let formatting_tuple = ("a", "b");
     let lazy_fmt = format_args!("lazily formatted text");

examples/ssr.rs

@@ -5,11 +5,11 @@ use dioxus::ssr;
 
 fn main() {
     let mut vdom = VirtualDom::new(App);
-    // vdom.rebuild_in_place().expect("Rebuilding failed");
-    println!("{}", ssr::render_vdom(&vdom, |c| c));
+    vdom.rebuild_in_place().expect("Rebuilding failed");
+    println!("{}", ssr::render_vdom(&vdom));
 }
 
-static App: Component<()> = |cx, props| {
+static App: Component<()> = |cx| {
     cx.render(rsx!(
         div {
             h1 { "Title" }
@@ -21,6 +21,6 @@ static App: Component<()> = |cx, props| {
 struct MyProps<'a> {
     text: &'a str,
 }
-fn App2(cx: Scope, props: &MyProps) -> Element {
+fn App2<'a>(cx: Scope<'a, MyProps<'a>>) -> Element {
     None
 }

examples/ssr/basic.rs

@@ -12,7 +12,7 @@ fn main() {
     )
 }
 
-pub static App: FC<()> = |cx, props| {
+pub static App: Component<()> = |cx| {
     cx.render(rsx!(
         div {
             class: "overflow-hidden"

examples/ssr/tide.rs

@@ -26,7 +26,7 @@ fn main() {}
 //         dom.rebuild();
 
 //         Ok(Response::builder(200)
-//             .body(format!("{}", dioxus_ssr::render_vdom(&dom, |c| c)))
+//             .body(format!("{}", dioxus_ssr::render_vdom(&dom)))
 //             .content_type(tide::http::mime::HTML)
 //             .build())
 //     });
@@ -42,8 +42,8 @@ fn main() {}
 //     initial_name: String,
 // }
 
-// static Example: FC<ExampleProps> = |cx, props| {
-//     let dispaly_name = use_state(cx, move || props.initial_name.clone());
+// static Example: Component<ExampleProps> = |cx| {
+//     let dispaly_name = use_state(&cx, move || props.initial_name.clone());
 
 //     cx.render(rsx! {
 //         div { class: "py-12 px-4 text-center w-full max-w-2xl mx-auto",

examples/ssr/tofile.rs

@@ -24,7 +24,7 @@ fn main() {
     .unwrap();
 }
 
-pub static App: FC<()> = |cx, props| {
+pub static App: Component<()> = |cx| {
     cx.render(rsx!(
         div { class: "overflow-hidden"
             link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
@@ -39,7 +39,7 @@ pub static App: FC<()> = |cx, props| {
     ))
 };
 
-pub static Header: FC<()> = |cx, props| {
+pub static Header: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -65,7 +65,7 @@ pub static Header: FC<()> = |cx, props| {
     })
 };
 
-pub static Hero: FC<()> = |cx, props| {
+pub static Hero: Component<()> = |cx| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -103,7 +103,7 @@ pub static Hero: FC<()> = |cx, props| {
         }
     })
 };
-pub static Entry: FC<()> = |cx, props| {
+pub static Entry: Component<()> = |cx| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -116,7 +116,7 @@ pub static Entry: FC<()> = |cx, props| {
     })
 };
 
-pub static StacksIcon: FC<()> = |cx, props| {
+pub static StacksIcon: Component<()> = |cx| {
     cx.render(rsx!(
         svg {
             xmlns: "http://www.w3.org/2000/svg"
@@ -131,7 +131,7 @@ pub static StacksIcon: FC<()> = |cx, props| {
         }
     ))
 };
-pub static RightArrowIcon: FC<()> = |cx, props| {
+pub static RightArrowIcon: Component<()> = |cx| {
     cx.render(rsx!(
         svg {
             fill: "none"

examples/tailwind.rs

@@ -14,7 +14,7 @@ fn main() {
 
 const STYLE: &str = "body {overflow:hidden;}";
 
-pub static App: Component<()> = |cx, props| {
+pub static App: Component<()> = |cx| {
     cx.render(rsx!(
         div { class: "overflow-hidden"
         style { "{STYLE}" }
@@ -30,7 +30,7 @@ pub static App: Component<()> = |cx, props| {
     ))
 };
 
-pub static Header: Component<()> = |cx, props| {
+pub static Header: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -56,7 +56,7 @@ pub static Header: Component<()> = |cx, props| {
     })
 };
 
-pub static Hero: Component<()> = |cx, props| {
+pub static Hero: Component<()> = |cx| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -94,7 +94,7 @@ pub static Hero: Component<()> = |cx, props| {
         }
     })
 };
-pub static Entry: Component<()> = |cx, props| {
+pub static Entry: Component<()> = |cx| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -107,7 +107,7 @@ pub static Entry: Component<()> = |cx, props| {
     })
 };
 
-pub static StacksIcon: Component<()> = |cx, props| {
+pub static StacksIcon: Component<()> = |cx| {
     cx.render(rsx!(
         svg {
             // xmlns: "http://www.w3.org/2000/svg"
@@ -122,7 +122,7 @@ pub static StacksIcon: Component<()> = |cx, props| {
         }
     ))
 };
-pub static RightArrowIcon: Component<()> = |cx, props| {
+pub static RightArrowIcon: Component<()> = |cx| {
     cx.render(rsx!(
         svg {
             fill: "none"

examples/tasks.rs

@@ -6,11 +6,11 @@ use std::time::Duration;
 
 use dioxus::prelude::*;
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
-static App: Component<()> = |cx, props| {
-    let mut count = use_state(cx, || 0);
+static App: Component<()> = |cx| {
+    let mut count = use_state(&cx, || 0);
 
     cx.push_task(async move {
         tokio::time::sleep(Duration::from_millis(100)).await;

examples/todomvc.rs

@@ -4,7 +4,7 @@ use im_rc::HashMap;
 use std::rc::Rc;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 #[derive(PartialEq)]
@@ -22,10 +22,10 @@ pub struct TodoItem {
 }
 
 const STYLE: &str = include_str!("./assets/todomvc.css");
-const App: Component<()> = |cx, props| {
-    let mut draft = use_state(cx, || "".to_string());
-    let mut todos = use_state(cx, || HashMap::<u32, Rc<TodoItem>>::new());
-    let mut filter = use_state(cx, || FilterState::All);
+const App: Component<()> = |cx| {
+    let mut draft = use_state(&cx, || "".to_string());
+    let mut todos = use_state(&cx, || HashMap::<u32, Rc<TodoItem>>::new());
+    let mut filter = use_state(&cx, || FilterState::All);
 
     let todolist = todos
         .iter()
@@ -85,9 +85,9 @@ pub struct TodoEntryProps {
     todo: Rc<TodoItem>,
 }
 
-pub fn TodoEntry(cx: Scope, props: &TodoEntryProps) -> Element {
-    let mut is_editing = use_state(cx, || false);
-    let mut contents = use_state(cx, || String::from(""));
+pub fn TodoEntry(cx: Scope<TodoEntryProps>) -> Element {
+    let mut is_editing = use_state(&cx, || false);
+    let mut contents = use_state(&cx, || String::from(""));
     let todo = &props.todo;
 
     rsx!(cx, li {

examples/weather_app.rs

@@ -7,12 +7,12 @@
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 const ENDPOINT: &str = "https://api.openweathermap.org/data/2.5/weather";
 
-static App: Component<()> = |cx, props| {
+static App: Component<()> = |cx| {
     //
     let body = use_suspense(
         cx,
@@ -40,7 +40,7 @@ static App: Component<()> = |cx, props| {
 #[derive(PartialEq, Props)]
 struct WeatherProps {}
 
-static WeatherDisplay: Component<WeatherProps> = |cx, props| {
+static WeatherDisplay: Component<WeatherProps> = |cx| {
     //
     cx.render(rsx!(
         div { class: "flex items-center justify-center flex-col"

examples/web/async_web.rs

@@ -8,7 +8,7 @@ use dioxus_html as dioxus_elements;
 fn main() {
     console_error_panic_hook::set_once();
     wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
-    dioxus_web::launch(APP, |c| c)
+    dioxus_web::launch(APP)
 }
 
 #[derive(serde::Deserialize)]
@@ -16,8 +16,8 @@ struct DogApi {
     message: String,
 }
 
-static APP: FC<()> = |(cx, _props)| {
-    let state = use_state(cx, || 0);
+static APP: Component<()> = |(cx, _props)| {
+    let state = use_state(&cx, || 0);
 
     const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
     let doggo = use_suspense(

examples/web/basic.rs

@@ -11,13 +11,13 @@ fn main() {
     console_error_panic_hook::set_once();
 
     // Run the app
-    dioxus_web::launch(APP, |c| c)
+    dioxus_web::launch(APP)
 }
 
-static APP: FC<()> = |cx, _| {
-    let mut count = use_state(cx, || 3);
-    let content = use_state(cx, || String::from("h1"));
-    let text_content = use_state(cx, || String::from("Hello, world!"));
+static APP: Component<()> = |cx| {
+    let mut count = use_state(&cx, || 3);
+    let content = use_state(&cx, || String::from("h1"));
+    let text_content = use_state(&cx, || String::from("Hello, world!"));
 
     cx.render(rsx! {
         div {
@@ -86,4 +86,4 @@ fn render_list(cx: Context, count: usize) -> Element {
     rsx!(cx, ul { {items} })
 }
 
-static CHILD: FC<()> = |cx, _| rsx!(cx, div {"hello child"});
+static CHILD: Component<()> = |cx, _| rsx!(cx, div {"hello child"});

examples/web/blah.rs

@@ -21,11 +21,11 @@ fn main() {
     console_error_panic_hook::set_once();
 
     // Run the app
-    dioxus_web::launch(App, |c| c)
+    dioxus_web::launch(App)
 }
 
-static App: FC<()> = |cx, props| {
-    let mut state = use_state(cx, || 0);
+static App: Component<()> = |cx| {
+    let mut state = use_state(&cx, || 0);
     cx.render(rsx! {
         div {
             style: {

examples/web/btns.rs

@@ -18,12 +18,12 @@ use dioxus_html as dioxus_elements;
 // #[cfg]
 fn main() {
     wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
-    dioxus_web::launch(App, |c| c);
+    dioxus_web::launch(App);
     // env_logger::init();
-    // dioxus::web::launch(App, |c| c);
+    // dioxus::web::launch(App);
 }
 
-static App: FC<()> = |cx, props| {
+static App: Component<()> = |cx| {
     dbg!("rednering parent");
     cx.render(rsx! {
         div {
@@ -40,8 +40,8 @@ static App: FC<()> = |cx, props| {
     })
 };
 
-static But: FC<()> = |cx, props| {
-    let mut count = use_state(cx, || 0);
+static But: Component<()> = |cx| {
+    let mut count = use_state(&cx, || 0);
 
     // let d = Dropper { name: "asd" };
     // let handler = move |_| {

examples/web/crm2.rs

@@ -12,7 +12,7 @@ fn main() {
     wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
     console_error_panic_hook::set_once();
 
-    dioxus_web::launch(App, |c| c)
+    dioxus_web::launch(App)
 }
 
 enum Scene {
@@ -28,13 +28,13 @@ pub struct Client {
     pub description: String,
 }
 
-static App: FC<()> = |cx, _| {
-    let scene = use_state(cx, || Scene::ClientsList);
-    let clients = use_ref(cx, || vec![] as Vec<Client>);
+static App: Component<()> = |cx| {
+    let scene = use_state(&cx, || Scene::ClientsList);
+    let clients = use_ref(&cx, || vec![] as Vec<Client>);
 
-    let firstname = use_state(cx, || String::new());
-    let lastname = use_state(cx, || String::new());
-    let description = use_state(cx, || String::new());
+    let firstname = use_state(&cx, || String::new());
+    let lastname = use_state(&cx, || String::new());
+    let description = use_state(&cx, || String::new());
 
     let scene = match *scene {
         Scene::ClientsList => {

examples/web/demo.rs

@@ -21,10 +21,10 @@ fn main() {
     console_error_panic_hook::set_once();
 
     // Run the app
-    dioxus_web::launch(App, |c| c)
+    dioxus_web::launch(App)
 }
 
-pub static App: FC<()> = |cx, props| {
+pub static App: Component<()> = |cx| {
     cx.render(rsx!(
         div { class: "overflow-hidden"
             link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
@@ -39,7 +39,7 @@ pub static App: FC<()> = |cx, props| {
     ))
 };
 
-pub static Header: FC<()> = |cx, props| {
+pub static Header: Component<()> = |cx| {
     cx.render(rsx! {
         div {
             header { class: "text-gray-400 bg-gray-900 body-font"
@@ -65,7 +65,7 @@ pub static Header: FC<()> = |cx, props| {
     })
 };
 
-pub static Hero: FC<()> = |cx, props| {
+pub static Hero: Component<()> = |cx| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -103,7 +103,7 @@ pub static Hero: FC<()> = |cx, props| {
         }
     })
 };
-pub static Entry: FC<()> = |cx, props| {
+pub static Entry: Component<()> = |cx| {
     //
     cx.render(rsx! {
         section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -116,7 +116,7 @@ pub static Entry: FC<()> = |cx, props| {
     })
 };
 
-pub static StacksIcon: FC<()> = |cx, props| {
+pub static StacksIcon: Component<()> = |cx| {
     cx.render(rsx!(
         svg {
             // xmlns: "http://www.w3.org/2000/svg"
@@ -131,7 +131,7 @@ pub static StacksIcon: FC<()> = |cx, props| {
         }
     ))
 };
-pub static RightArrowIcon: FC<()> = |cx, props| {
+pub static RightArrowIcon: Component<()> = |cx| {
     cx.render(rsx!(
         svg {
             fill: "none"

examples/web_tick.rs

@@ -16,10 +16,10 @@ fn main() {
     #[cfg(target_arch = "wasm32")]
     intern_strings();
 
-    dioxus::web::launch(App, |c| c);
+    dioxus::web::launch(App);
 }
 
-static App: Component<()> = |cx, props| {
+static App: Component<()> = |cx| {
     let mut rng = SmallRng::from_entropy();
     let rows = (0..1_000).map(|f| {
         let label = Label::new(&mut rng);
@@ -49,7 +49,7 @@ fn Row((cx, props): ScopeState<RowProps>) -> Element {
     let [adj, col, noun] = props.label.0;
     cx.render(rsx! {
         tr {
-            td { class:"col-md-1", "{props.row_id}" }
+            td { class:"col-md-1", "{cx.props.row_id}" }
             td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
                 a { class: "lbl", "{adj}" "{col}" "{noun}" }
             }

examples/webview_web.rs

@@ -13,11 +13,11 @@
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::web::launch(App, |c| c);
+    dioxus::web::launch(App);
 }
 
-static App: Component<()> = |cx, props| {
-    let mut count = use_state(cx, || 0);
+static App: Component<()> = |cx| {
+    let mut count = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {