diff --git a/Cargo.toml b/Cargo.toml
index c493bcd19..fde5cd137 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -10,7 +10,7 @@ tui = { version = "0.16.0", features = ["crossterm"], default-features = false }
 crossterm = "0.22.1"
 anyhow = "1.0.42"
 thiserror = "1.0.24"
-dioxus = "0.1.7"
+dioxus = "0.1.8"
 hecs = "0.7.3"
 ctrlc = "3.2.1"
 bumpalo = { version = "3.8.0", features = ["boxed"] }
diff --git a/examples/components.rs b/examples/components.rs
new file mode 100644
index 000000000..1c12b4c33
--- /dev/null
+++ b/examples/components.rs
@@ -0,0 +1,64 @@
+use dioxus::prelude::*;
+
+fn main() {
+    rink::launch(app);
+}
+
+#[derive(Props, PartialEq)]
+struct QuadrentProps {
+    color: String,
+    text: String
+}
+
+fn Quadrent(cx: Scope<QuadrentProps>) -> Element{
+    cx.render(rsx! {
+        div {
+            border_width: "1px",
+            width: "50%",
+            height: "100%",
+            background_color: "{cx.props.color}",
+            justify_content: "center",
+            align_items: "center",
+
+            "{cx.props.text}"
+        }
+    })
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                Quadrent{
+                    color: "red".to_string(),
+                    text: "[A]".to_string()
+                },
+                Quadrent{
+                    color: "black".to_string(),
+                    text: "[B]".to_string()
+                }
+            }
+
+            div {
+                width: "100%",
+                height: "50%",
+                flex_direction: "row",
+                Quadrent{
+                    color: "green".to_string(),
+                    text: "[C]".to_string()
+                },
+                Quadrent{
+                    color: "blue".to_string(),
+                    text: "[D]".to_string()
+                }
+            }
+        }
+    })
+}
diff --git a/examples/keys.rs b/examples/keys.rs
index 58236a4d5..1270c5ea7 100644
--- a/examples/keys.rs
+++ b/examples/keys.rs
@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
+    let (count, set_count) = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
@@ -25,10 +25,10 @@ fn app(cx: Scope) -> Element {
             //     onkeydown: move |evt: KeyEvent| {
             //         use crossterm::event::KeyCode::*;
             //         match evt.code {
-            //             Left => count += 1,
-            //             Right => count -= 1,
-            //             Up => count += 10,
-            //             Down => count -= 10,
+            //             Left => set_count(count + 1),
+            //             Right => set_count(count - 1),
+            //             Up => set_count(count + 10),
+            //             Down => set_count(count - 10),
             //             _ => {},
             //         }
             //     },
@@ -42,7 +42,7 @@ fn app(cx: Scope) -> Element {
 }
 
 fn app2<'a>(cx: Scope<'a>) -> Element<'a> {
-    let mut count = use_state(&cx, || 0);
+    let (count, set_count) = use_state(&cx, || 0);
 
     cx.render(rsx! {
         div {
@@ -51,7 +51,7 @@ fn app2<'a>(cx: Scope<'a>) -> Element<'a> {
             background_color: "red",
             justify_content: "center",
             align_items: "center",
-            oninput: move |_| count += 1,
+            oninput: move |_| set_count(count + 1),
             "Hello world!",
             h1 {},
         }
diff --git a/examples/task.rs b/examples/task.rs
index a9b757612..cc39d6711 100644
--- a/examples/task.rs
+++ b/examples/task.rs
@@ -5,17 +5,15 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
+    let (count, set_count) = use_state(&cx, || 0);
 
-    use_future(&cx, || {
-        let set_count = count.setter();
-        let mut mycount = 0;
+    use_future(&cx, move || {
+        let set_count = set_count.to_owned();
         let update = cx.schedule_update();
         async move {
             loop {
-                tokio::time::sleep(std::time::Duration::from_millis(50)).await;
-                mycount += 1;
-                set_count(mycount);
+                set_count.with_mut(|f| *f += 1);
+                tokio::time::sleep(std::time::Duration::from_millis(1000)).await;
                 update();
             }
         }
diff --git a/src/hooks.rs b/src/hooks.rs
index 1400acd62..045325761 100644
--- a/src/hooks.rs
+++ b/src/hooks.rs
@@ -38,13 +38,13 @@ impl RinkContext {
 
 #[derive(Props)]
 pub struct AppHandlerProps<'a> {
-    // #[props(setter(strip_option), default)]
+    #[props(default)]
     onkeydown: EventHandler<'a, KeyEvent>,
 
-    // #[props(setter(strip_option), default)]
+    #[props(default)]
     onmousedown: EventHandler<'a, MouseEvent>,
 
-    #[props(setter(strip_option), default)]
+    #[props(default)]
     onresize: Option<EventHandler<'a, (u16, u16)>>,
 }
 
diff --git a/src/render.rs b/src/render.rs
index ab671bb09..9189e4eaa 100644
--- a/src/render.rs
+++ b/src/render.rs
@@ -45,7 +45,13 @@ pub fn render_vnode<'a>(
             }
             return;
         }
-        VNode::Component(_) => todo!(),
+
+        VNode::Component(vcomp) => {
+            let idx = vcomp.scope.get().unwrap();
+            let new_node = vdom.get_scope(idx).unwrap().root_node();
+            render_vnode(frame, layout, layouts, vdom, new_node);
+            return;
+        }
 
         VNode::Placeholder(_) | VNode::Element(_) | VNode::Text(_) => {}
     }