diff --git a/Cargo.toml b/Cargo.toml
index e26d6ba8b..0a3280b3c 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -33,7 +33,7 @@ dioxus-native-core = { version = "0.4", features = ["dioxus"] }
 dioxus-core-macro = { version = "0.4" }
 dioxus-hooks = { version = "0.4" }
 dioxus-core = { version = "0.4" }
-dioxus-hot-reload = { version = "0.4", features = ["file_watcher"] }
+dioxus-hot-reload = { version = "0.4", features = ["file_watcher", "custom_file_watcher"] }
 dioxus-router = { version = "0.4", default-features = false }
 
 skia-safe = { version = "0.67.0", features = ["gl", "textlayout", "svg"] }
diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs
index c6597d662..5b76ff6e9 100644
--- a/crates/components/src/accordion.rs
+++ b/crates/components/src/accordion.rs
@@ -50,7 +50,7 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     } = theme.accordion;
 
     // Adapt the accordion if the body size changes
-    use_memo(
+    let _ = use_memo(
         cx,
         &(
             size.area.width(),
@@ -77,7 +77,7 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
         open.set(!*open.get());
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == AccordionStatus::Hovering {
diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
index 722bec57a..fe989728c 100644
--- a/crates/components/src/button.rs
+++ b/crates/components/src/button.rs
@@ -79,7 +79,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
         }
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == ButtonStatus::Hovering {
diff --git a/crates/components/src/cursor_area.rs b/crates/components/src/cursor_area.rs
index 33abeb77c..3da983082 100644
--- a/crates/components/src/cursor_area.rs
+++ b/crates/components/src/cursor_area.rs
@@ -58,7 +58,7 @@ pub fn CursorArea<'a>(cx: Scope<'a, CursorAreaProps<'a>>) -> Element<'a> {
         }
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![is_hovering];
         move || {
             if *is_hovering.read() {
diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
index 6162be589..37dadd108 100644
--- a/crates/components/src/dropdown.rs
+++ b/crates/components/src/dropdown.rs
@@ -60,7 +60,7 @@ where
     };
     let color = theme.dropdown_item.font_theme.color;
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == DropdownItemStatus::Hovering {
@@ -181,11 +181,11 @@ where
     let focus_id = focus.attribute(cx);
 
     // Update the provided value if the passed value changes
-    use_memo(cx, &cx.props.value, move |value| {
+    let _ = use_memo(cx, &cx.props.value, move |value| {
         *selected.write() = value;
     });
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.current() == DropdownStatus::Hovering {
diff --git a/crates/components/src/gesture_area.rs b/crates/components/src/gesture_area.rs
index 8d7785274..eb672c252 100644
--- a/crates/components/src/gesture_area.rs
+++ b/crates/components/src/gesture_area.rs
@@ -62,7 +62,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
     let touch_events = use_ref::<EventsQueue>(cx, VecDeque::new);
 
-    use_memo(cx, touch_events, move |_| {
+    let _ = use_memo(cx, touch_events, move |_| {
         // Keep the touch events queue under a certain size
         if touch_events.read().len() > MAX_EVENTS_QUEUE {
             touch_events.write_silent().pop_front();
diff --git a/crates/components/src/graph.rs b/crates/components/src/graph.rs
index 3552b5e48..61229ee19 100644
--- a/crates/components/src/graph.rs
+++ b/crates/components/src/graph.rs
@@ -45,7 +45,7 @@ pub struct GraphProps {
 pub fn Graph(cx: Scope<GraphProps>) -> Element {
     let platform = use_platform(cx);
 
-    use_memo(cx, (cx.props,), move |_| {
+    let _ = use_memo(cx, (cx.props,), move |_| {
         platform.send(EventMessage::RequestRerender)
     });
 
diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
index 28aae77dd..d3fd2a1c9 100644
--- a/crates/components/src/input.rs
+++ b/crates/components/src/input.rs
@@ -105,7 +105,7 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
         InputMode::Shown => cx.props.value.clone(),
     };
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.read() == InputStatus::Hovering {
diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
index 126db06bb..908a8733d 100644
--- a/crates/components/src/scroll_views/virtual_scroll_view.rs
+++ b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -1,3 +1,5 @@
+#![allow(clippy::type_complexity)]
+
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{keyboard::Key, KeyboardEvent, MouseEvent, WheelEvent};
diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs
index b1b179007..6cd720feb 100644
--- a/crates/components/src/slider.rs
+++ b/crates/components/src/slider.rs
@@ -84,7 +84,7 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
 
     let progress = (value / 100.0) * cx.props.width + 0.5;
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.read() == SliderStatus::Hovering {
diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
index 38c9e58ae..0c3028f42 100644
--- a/crates/components/src/switch.rs
+++ b/crates/components/src/switch.rs
@@ -56,7 +56,7 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
     let platform = use_platform(cx);
     let status = use_ref(cx, SwitchStatus::default);
 
-    use_on_unmount(cx, {
+    use_on_destroy(cx, {
         to_owned![status, platform];
         move || {
             if *status.read() == SwitchStatus::Hovering {
@@ -98,7 +98,7 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
         }
     };
 
-    use_memo(cx, &cx.props.enabled, move |enabled| {
+    let _ = use_memo(cx, &cx.props.enabled, move |enabled| {
         if enabled {
             animation.start(Animation::new_sine_in_out(0.0..=25.0, 200));
         } else if animation.value() > 0.0 {
diff --git a/crates/components/src/table.rs b/crates/components/src/table.rs
index 4f8d15635..74e00dddd 100644
--- a/crates/components/src/table.rs
+++ b/crates/components/src/table.rs
@@ -5,7 +5,7 @@ use freya_elements::events::MouseEvent;
 use freya_hooks::{use_get_theme, FontTheme, TableTheme};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn TableArrow(cx: Scope, order_direction: OrderDirection) -> Element {
     let theme = use_get_theme(cx);
     let TableTheme { arrow_fill, .. } = theme.table;
diff --git a/crates/devtools/src/lib.rs b/crates/devtools/src/lib.rs
index c4bfaff25..199f1db4e 100644
--- a/crates/devtools/src/lib.rs
+++ b/crates/devtools/src/lib.rs
@@ -189,7 +189,7 @@ pub fn DevTools(cx: Scope<DevToolsProps>) -> Element {
     )
 }
 
-#[inline_props]
+#[component]
 #[allow(non_snake_case)]
 pub fn DevtoolsBar(cx: Scope) -> Element {
     render!(
@@ -204,7 +204,7 @@ pub fn DevtoolsBar(cx: Scope) -> Element {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeInspectorBar(cx: Scope, node_id: NodeId) -> Element {
     render!(
         TabsBar {
@@ -238,7 +238,7 @@ pub enum Route {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn PageNotFound(cx: Scope) -> Element {
     render!(
         label {
@@ -248,7 +248,7 @@ fn PageNotFound(cx: Scope) -> Element {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn TreeElementsTab(cx: Scope) -> Element {
     let hovered_node = use_shared_state::<HoveredNode>(cx).unwrap();
 
diff --git a/crates/devtools/src/node.rs b/crates/devtools/src/node.rs
index 235930e3d..fba989d58 100644
--- a/crates/devtools/src/node.rs
+++ b/crates/devtools/src/node.rs
@@ -5,7 +5,7 @@ use freya_elements::elements as dioxus_elements;
 use crate::TreeNode;
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeElement<'a>(
     cx: Scope<'a>,
     node: TreeNode,
diff --git a/crates/devtools/src/property.rs b/crates/devtools/src/property.rs
index 997226d08..cbbf80534 100644
--- a/crates/devtools/src/property.rs
+++ b/crates/devtools/src/property.rs
@@ -4,7 +4,7 @@ use freya_engine::prelude::*;
 use freya_node_state::{Border, Fill, Shadow};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn Property<'a>(cx: Scope<'a>, name: &'a str, value: String) -> Element<'a> {
     render!(
         rect {
@@ -36,7 +36,7 @@ pub fn Property<'a>(cx: Scope<'a>, name: &'a str, value: String) -> Element<'a>
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn LinearGradientProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> Element<'a> {
     render!(
         rect {
@@ -64,7 +64,7 @@ pub fn LinearGradientProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> E
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn ColorProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> Element<'a> {
     render!(
         rect {
@@ -112,7 +112,7 @@ pub fn ColorProperty<'a>(cx: Scope<'a>, name: &'a str, fill: Fill) -> Element<'a
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn ShadowProperty<'a>(cx: Scope<'a>, name: &'a str, shadow: Shadow) -> Element<'a> {
     render!(
         rect {
@@ -168,7 +168,7 @@ pub fn ShadowProperty<'a>(cx: Scope<'a>, name: &'a str, shadow: Shadow) -> Eleme
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn BorderProperty<'a>(cx: Scope<'a>, name: &'a str, border: Border) -> Element<'a> {
     render!(
         rect {
@@ -223,7 +223,7 @@ pub fn BorderProperty<'a>(cx: Scope<'a>, name: &'a str, border: Border) -> Eleme
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn TextShadowProperty<'a>(
     cx: Scope<'a>,
     name: &'a str,
diff --git a/crates/devtools/src/tabs/layout.rs b/crates/devtools/src/tabs/layout.rs
index 83a006c58..a83698410 100644
--- a/crates/devtools/src/tabs/layout.rs
+++ b/crates/devtools/src/tabs/layout.rs
@@ -6,7 +6,7 @@ use freya_elements::elements as dioxus_elements;
 use crate::{hooks::use_selected_node, NodeInspectorBar};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element {
     let node = use_selected_node(cx, &cx.props.node_id);
 
diff --git a/crates/devtools/src/tabs/style.rs b/crates/devtools/src/tabs/style.rs
index 5a9b960c3..f6d00a76b 100644
--- a/crates/devtools/src/tabs/style.rs
+++ b/crates/devtools/src/tabs/style.rs
@@ -14,7 +14,7 @@ use crate::{
 };
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodeInspectorStyle(cx: Scope, node_id: NodeId) -> Element {
     let node = use_selected_node(cx, &cx.props.node_id);
 
diff --git a/crates/devtools/src/tabs/tree.rs b/crates/devtools/src/tabs/tree.rs
index 5e61b88c6..b914c1b50 100644
--- a/crates/devtools/src/tabs/tree.rs
+++ b/crates/devtools/src/tabs/tree.rs
@@ -6,7 +6,7 @@ use freya_components::*;
 use crate::{node::NodeElement, NodeIdSerializer, Route, TreeNode};
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 pub fn NodesTree<'a>(
     cx: Scope<'a>,
     height: &'a str,
diff --git a/crates/hooks/src/use_accessibility.rs b/crates/hooks/src/use_accessibility.rs
index b5ef14ada..55e54edda 100644
--- a/crates/hooks/src/use_accessibility.rs
+++ b/crates/hooks/src/use_accessibility.rs
@@ -11,7 +11,7 @@ pub fn use_init_accessibility(cx: &ScopeState) {
     let focused_id = use_shared_state::<Option<FocusId>>(cx).unwrap();
     let current_focused_id = *focused_id.read();
 
-    use_memo(cx, &(current_focused_id,), move |(focused_id,)| {
+    let _ = use_memo(cx, &(current_focused_id,), move |(focused_id,)| {
         if let Some(focused_id) = focused_id {
             platform
                 .send(EventMessage::FocusAccessibilityNode(focused_id))
diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs
index 2c1c451b7..61b4db4e2 100644
--- a/crates/hooks/src/use_animation.rs
+++ b/crates/hooks/src/use_animation.rs
@@ -135,7 +135,7 @@ mod test {
 
             let progress = animation.value();
 
-            use_memo(cx, (), move |_| {
+            let _ = use_memo(cx, (), move |_| {
                 animation.start(Animation::new_linear(0.0..=100.0, 50));
             });
 
@@ -185,7 +185,7 @@ mod test {
                 }
             };
 
-            use_memo(cx, (), move |_| {
+            let _ = use_memo(cx, (), move |_| {
                 animation.start(Animation::new_linear(10.0..=100.0, 50));
             });
 
diff --git a/crates/hooks/src/use_animation_transition.rs b/crates/hooks/src/use_animation_transition.rs
index fbb87197b..d7b58c956 100644
--- a/crates/hooks/src/use_animation_transition.rs
+++ b/crates/hooks/src/use_animation_transition.rs
@@ -285,7 +285,7 @@ where
     let transitions_storage = use_state(cx, || animations_map(transitions));
     let platform = use_platform(cx);
 
-    use_memo(cx, dependencies, {
+    let _ = use_memo(cx, dependencies, {
         let storage_setter = transitions_storage.setter();
         move |v| {
             storage_setter(animations_map(&init(v)));
@@ -328,7 +328,7 @@ mod test {
 
             let progress = animation.get(0).unwrap().as_size();
 
-            use_memo(cx, (), move |_| {
+            let _ = use_memo(cx, (), move |_| {
                 animation.start();
             });
 
diff --git a/crates/testing/tests/test.rs b/crates/testing/tests/test.rs
index 182a27ed6..0b6bd9cdd 100644
--- a/crates/testing/tests/test.rs
+++ b/crates/testing/tests/test.rs
@@ -24,7 +24,7 @@ async fn with_state() {
     fn stateful_app(cx: Scope) -> Element {
         let state = use_state(cx, || false);
 
-        use_memo(cx, (), |_| {
+        let _ = use_memo(cx, (), |_| {
             state.set(true);
         });
 
diff --git a/examples/canvas.rs b/examples/canvas.rs
index 909558af7..dd8636d7b 100644
--- a/examples/canvas.rs
+++ b/examples/canvas.rs
@@ -169,8 +169,9 @@ fn Editor(cx: Scope) -> Element {
     let font_style = if *is_italic.get() { "italic" } else { "normal" };
     let font_weight = if *is_bold.get() { "bold" } else { "normal" };
 
-    use_memo(cx, (), |_| {
+    use_on_create(cx, move || {
         focus_manager.focus();
+        async move {}
     });
 
     let onclick = {
diff --git a/examples/drag_drop.rs b/examples/drag_drop.rs
index fa2b7e2e2..31f40cbc5 100644
--- a/examples/drag_drop.rs
+++ b/examples/drag_drop.rs
@@ -45,7 +45,7 @@ fn app(cx: Scope) -> Element {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn Column(
     cx: Scope,
     direction: SwapDirection,
diff --git a/examples/sidebar.rs b/examples/sidebar.rs
index 5e3afb45d..1e0cddd2e 100644
--- a/examples/sidebar.rs
+++ b/examples/sidebar.rs
@@ -11,7 +11,7 @@ fn main() {
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn Sidebar<'a>(cx: Scope<'a>, children: Element<'a>, sidebar: Element<'a>) -> Element<'a> {
     let theme = use_theme(cx);
     let background = theme.read().body.background;
@@ -49,7 +49,7 @@ fn Sidebar<'a>(cx: Scope<'a>, children: Element<'a>, sidebar: Element<'a>) -> El
 }
 
 #[allow(non_snake_case)]
-#[inline_props]
+#[component]
 fn SidebarItem<'a>(
     cx: Scope<'a>,
     children: Element<'a>,