diff --git a/crates/yew-hooks-test/Cargo.toml b/crates/yew-hooks-test/Cargo.toml
index 89553c3..3a8692a 100644
--- a/crates/yew-hooks-test/Cargo.toml
+++ b/crates/yew-hooks-test/Cargo.toml
@@ -15,4 +15,4 @@ documentation = "https://github.com/jetli/yew-hooks"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-yew = "0.19.3"
\ No newline at end of file
+yew = { git = "https://github.com/yewstack/yew", features=["csr"]}
\ No newline at end of file
diff --git a/crates/yew-hooks/Cargo.toml b/crates/yew-hooks/Cargo.toml
index 025fa05..c481a60 100644
--- a/crates/yew-hooks/Cargo.toml
+++ b/crates/yew-hooks/Cargo.toml
@@ -16,8 +16,8 @@ documentation = "https://docs.rs/yew-hooks/"
 
 [dependencies]
 log = "0.4"
-yew = "0.19.3"
-gloo = "0.4"
+yew = { git = "https://github.com/yewstack/yew", features=["csr"] }
+gloo = "0.7"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 serde = "1"
diff --git a/crates/yew-hooks/src/hooks/use_async.rs b/crates/yew-hooks/src/hooks/use_async.rs
index 481b82d..9776867 100644
--- a/crates/yew-hooks/src/hooks/use_async.rs
+++ b/crates/yew-hooks/src/hooks/use_async.rs
@@ -131,6 +131,7 @@ where
 ///     Ok(String::from("Jet Li"))
 /// }
 /// ```
+#[hook]
 pub fn use_async<F, T, E>(future: F) -> UseAsyncHandle<T, E>
 where
     F: Future<Output = Result<T, E>> + 'static,
@@ -188,6 +189,7 @@ where
 ///     Ok(String::from("Jet Li"))
 /// }
 /// ```
+#[hook]
 pub fn use_async_with_options<F, T, E>(future: F, options: UseAsyncOptions) -> UseAsyncHandle<T, E>
 where
     F: Future<Output = Result<T, E>> + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_before_unload.rs b/crates/yew-hooks/src/hooks/use_before_unload.rs
index 52fe0e1..ada9d8e 100644
--- a/crates/yew-hooks/src/hooks/use_before_unload.rs
+++ b/crates/yew-hooks/src/hooks/use_before_unload.rs
@@ -1,4 +1,5 @@
 use web_sys::BeforeUnloadEvent;
+use yew::prelude::*;
 
 use super::use_event_with_window;
 
@@ -21,6 +22,7 @@ use super::use_event_with_window;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_before_unload(enabled: bool, msg: String) {
     use_event_with_window("beforeunload", move |e: BeforeUnloadEvent| {
         if !enabled {
diff --git a/crates/yew-hooks/src/hooks/use_click_away.rs b/crates/yew-hooks/src/hooks/use_click_away.rs
index 8507fb6..fb75f3a 100644
--- a/crates/yew-hooks/src/hooks/use_click_away.rs
+++ b/crates/yew-hooks/src/hooks/use_click_away.rs
@@ -30,6 +30,7 @@ use super::{use_event_with_window, use_latest};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_click_away<F>(node: NodeRef, callback: F)
 where
     F: Fn(Event) + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_clipboard.rs b/crates/yew-hooks/src/hooks/use_clipboard.rs
index 53cde1d..4212234 100644
--- a/crates/yew-hooks/src/hooks/use_clipboard.rs
+++ b/crates/yew-hooks/src/hooks/use_clipboard.rs
@@ -122,25 +122,32 @@ impl Clone for UseClipboardHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_clipboard() -> UseClipboardHandle {
     let text = use_state_ptr_eq(|| None);
     let bytes = use_state_ptr_eq(|| None);
     let bytes_mime_type = use_state_ptr_eq(|| None);
-    let is_supported = use_ref(|| {
-        window()
-            .expect_throw("Can't find the global Window")
-            .navigator()
-            .clipboard()
-            .is_some()
-    });
+    let is_supported = use_memo(
+        |_| {
+            window()
+                .expect_throw("Can't find the global Window")
+                .navigator()
+                .clipboard()
+                .is_some()
+        },
+        (),
+    );
     let copied = use_state_ptr_eq(|| false);
 
-    let clipboard = use_ref(|| {
-        window()
-            .expect_throw("Can't find the global Window")
-            .navigator()
-            .clipboard()
-    });
+    let clipboard = use_memo(
+        |_| {
+            window()
+                .expect_throw("Can't find the global Window")
+                .navigator()
+                .clipboard()
+        },
+        (),
+    );
 
     let write_text = {
         let clipboard = clipboard.clone();
diff --git a/crates/yew-hooks/src/hooks/use_counter.rs b/crates/yew-hooks/src/hooks/use_counter.rs
index ee2230d..f21ca95 100644
--- a/crates/yew-hooks/src/hooks/use_counter.rs
+++ b/crates/yew-hooks/src/hooks/use_counter.rs
@@ -167,6 +167,7 @@ impl PartialEq for UseCounterHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_counter(default: i32) -> UseCounterHandle {
     let inner = use_reducer(move || UseCounterReducer {
         value: default,
diff --git a/crates/yew-hooks/src/hooks/use_debounce.rs b/crates/yew-hooks/src/hooks/use_debounce.rs
index e795022..366f8f3 100644
--- a/crates/yew-hooks/src/hooks/use_debounce.rs
+++ b/crates/yew-hooks/src/hooks/use_debounce.rs
@@ -1,3 +1,5 @@
+use yew::prelude::*;
+
 use super::{use_timeout, UseTimeoutHandle};
 
 /// State handle for the [`use_debounce`] hook.
@@ -84,6 +86,7 @@ impl Clone for UseDebounceHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_debounce<Callback>(callback: Callback, millis: u32) -> UseDebounceHandle
 where
     Callback: FnOnce() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_debounce_effect.rs b/crates/yew-hooks/src/hooks/use_debounce_effect.rs
index b3a3b2c..cf09b14 100644
--- a/crates/yew-hooks/src/hooks/use_debounce_effect.rs
+++ b/crates/yew-hooks/src/hooks/use_debounce_effect.rs
@@ -58,6 +58,7 @@ use super::{use_debounce, use_unmount};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_debounce_effect<Callback>(callback: Callback, millis: u32)
 where
     Callback: FnOnce() + 'static,
@@ -82,6 +83,7 @@ where
 ///
 /// Whenever the dependencies are changed, the debounce effect is run again.
 /// To detect changes, dependencies must implement `PartialEq`.
+#[hook]
 pub fn use_debounce_effect_with_deps<Callback, Dependents>(
     callback: Callback,
     millis: u32,
diff --git a/crates/yew-hooks/src/hooks/use_debounce_state.rs b/crates/yew-hooks/src/hooks/use_debounce_state.rs
index 652e024..2c83537 100644
--- a/crates/yew-hooks/src/hooks/use_debounce_state.rs
+++ b/crates/yew-hooks/src/hooks/use_debounce_state.rs
@@ -75,6 +75,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_debounce_state<T, F>(init_fn: F, millis: u32) -> UseDebounceStateHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_default.rs b/crates/yew-hooks/src/hooks/use_default.rs
index d9b047e..5f68317 100644
--- a/crates/yew-hooks/src/hooks/use_default.rs
+++ b/crates/yew-hooks/src/hooks/use_default.rs
@@ -83,13 +83,14 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_default<T, F>(init_fn: F, default: T) -> UseDefaultHandle<T>
 where
     T: 'static,
     F: FnOnce() -> Option<T>,
 {
     let inner = use_state(init_fn);
-    let default = use_ref(|| default);
+    let default = use_memo(|_| default, ());
 
     UseDefaultHandle { inner, default }
 }
diff --git a/crates/yew-hooks/src/hooks/use_drag.rs b/crates/yew-hooks/src/hooks/use_drag.rs
index e78a517..3146564 100644
--- a/crates/yew-hooks/src/hooks/use_drag.rs
+++ b/crates/yew-hooks/src/hooks/use_drag.rs
@@ -45,6 +45,7 @@ pub struct UseDragHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_drag(node: NodeRef) -> UseDragHandle {
     use_drag_with_options(node, UseDragOptions::default())
 }
@@ -85,6 +86,7 @@ pub fn use_drag(node: NodeRef) -> UseDragHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_drag_with_options(node: NodeRef, options: UseDragOptions) -> UseDragHandle {
     let dragging = use_state(|| false);
 
diff --git a/crates/yew-hooks/src/hooks/use_drop.rs b/crates/yew-hooks/src/hooks/use_drop.rs
index 4c53315..cf37e1f 100644
--- a/crates/yew-hooks/src/hooks/use_drop.rs
+++ b/crates/yew-hooks/src/hooks/use_drop.rs
@@ -86,6 +86,7 @@ pub struct UseDropHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_drop(node: NodeRef) -> UseDropHandle {
     use_drop_with_options(node, UseDropOptions::default())
 }
@@ -119,6 +120,7 @@ pub fn use_drop(node: NodeRef) -> UseDropHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_drop_with_options(node: NodeRef, options: UseDropOptions) -> UseDropHandle {
     let over = use_state(|| false);
     let files = use_state(|| None);
diff --git a/crates/yew-hooks/src/hooks/use_effect_once.rs b/crates/yew-hooks/src/hooks/use_effect_once.rs
index 0c7ab74..68bef77 100644
--- a/crates/yew-hooks/src/hooks/use_effect_once.rs
+++ b/crates/yew-hooks/src/hooks/use_effect_once.rs
@@ -24,6 +24,7 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_effect_once<Callback, Destructor>(callback: Callback)
 where
     Callback: FnOnce() -> Destructor + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_effect_update.rs b/crates/yew-hooks/src/hooks/use_effect_update.rs
index c954f6d..7b71d9e 100644
--- a/crates/yew-hooks/src/hooks/use_effect_update.rs
+++ b/crates/yew-hooks/src/hooks/use_effect_update.rs
@@ -27,6 +27,7 @@ use super::use_is_first_mount;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_effect_update<Callback, Destructor>(callback: Callback)
 where
     Callback: FnOnce() -> Destructor + 'static,
@@ -45,6 +46,7 @@ where
 
 /// This hook is similar to [`use_effect_update`] but it accepts dependencies.
 /// The signature is exactly the same as the [`use_effect_with_deps`] hook.
+#[hook]
 pub fn use_effect_update_with_deps<Callback, Destructor, Dependents>(
     callback: Callback,
     deps: Dependents,
diff --git a/crates/yew-hooks/src/hooks/use_event.rs b/crates/yew-hooks/src/hooks/use_event.rs
index bf026fa..9457ae1 100644
--- a/crates/yew-hooks/src/hooks/use_event.rs
+++ b/crates/yew-hooks/src/hooks/use_event.rs
@@ -33,6 +33,7 @@ use super::use_latest;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_event<T, F, E>(node: NodeRef, event_type: T, callback: F)
 where
     T: Into<Cow<'static, str>>,
@@ -102,6 +103,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_event_with_window<T, F, E>(event_type: T, callback: F)
 where
     T: Into<Cow<'static, str>>,
diff --git a/crates/yew-hooks/src/hooks/use_favicon.rs b/crates/yew-hooks/src/hooks/use_favicon.rs
index 9d5ee52..5a92899 100644
--- a/crates/yew-hooks/src/hooks/use_favicon.rs
+++ b/crates/yew-hooks/src/hooks/use_favicon.rs
@@ -23,6 +23,7 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_favicon(href: String) {
     use_effect_with_deps(
         move |href| {
diff --git a/crates/yew-hooks/src/hooks/use_geolocation.rs b/crates/yew-hooks/src/hooks/use_geolocation.rs
index 48f2c98..9ab0e2b 100644
--- a/crates/yew-hooks/src/hooks/use_geolocation.rs
+++ b/crates/yew-hooks/src/hooks/use_geolocation.rs
@@ -56,12 +56,14 @@ pub struct UseGeolocationState {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_geolocation() -> UseGeolocationState {
     use_geolocation_with_options(UseGeolocationOptions::default())
 }
 
 /// A sensor hook that tracks user's geographic location.
 /// See [`use_geolocation`]
+#[hook]
 pub fn use_geolocation_with_options(options: UseGeolocationOptions) -> UseGeolocationState {
     let state = use_state(|| UseGeolocationState {
         loading: true,
diff --git a/crates/yew-hooks/src/hooks/use_hash.rs b/crates/yew-hooks/src/hooks/use_hash.rs
index 9eea930..67afcee 100644
--- a/crates/yew-hooks/src/hooks/use_hash.rs
+++ b/crates/yew-hooks/src/hooks/use_hash.rs
@@ -71,6 +71,7 @@ impl PartialEq for UseHashHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_hash() -> UseHashHandle {
     let inner = use_state(|| window().location().hash().unwrap_or_default());
 
diff --git a/crates/yew-hooks/src/hooks/use_infinite_scroll.rs b/crates/yew-hooks/src/hooks/use_infinite_scroll.rs
index 2043ea3..4cf92bd 100644
--- a/crates/yew-hooks/src/hooks/use_infinite_scroll.rs
+++ b/crates/yew-hooks/src/hooks/use_infinite_scroll.rs
@@ -37,6 +37,7 @@ use super::{use_debounce, use_event, use_latest};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_infinite_scroll<Callback>(node: NodeRef, callback: Callback)
 where
     Callback: Fn() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_interval.rs b/crates/yew-hooks/src/hooks/use_interval.rs
index 202dca0..340714c 100644
--- a/crates/yew-hooks/src/hooks/use_interval.rs
+++ b/crates/yew-hooks/src/hooks/use_interval.rs
@@ -31,6 +31,7 @@ use super::use_mut_latest;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_interval<Callback>(callback: Callback, millis: u32)
 where
     Callback: FnMut() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_is_first_mount.rs b/crates/yew-hooks/src/hooks/use_is_first_mount.rs
index 38e07a6..28c6069 100644
--- a/crates/yew-hooks/src/hooks/use_is_first_mount.rs
+++ b/crates/yew-hooks/src/hooks/use_is_first_mount.rs
@@ -20,6 +20,7 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_is_first_mount() -> bool {
     let is_first = use_mut_ref(|| true);
 
diff --git a/crates/yew-hooks/src/hooks/use_is_mounted.rs b/crates/yew-hooks/src/hooks/use_is_mounted.rs
index f815a1b..405d8cb 100644
--- a/crates/yew-hooks/src/hooks/use_is_mounted.rs
+++ b/crates/yew-hooks/src/hooks/use_is_mounted.rs
@@ -24,7 +24,8 @@ use super::use_effect_once;
 ///     }
 /// }
 /// ```
-pub fn use_is_mounted() -> Rc<impl Fn() -> bool> {
+#[hook]
+pub fn use_is_mounted() -> Rc<dyn Fn() -> bool> {
     let is_mounted = use_mut_ref(|| false);
 
     {
diff --git a/crates/yew-hooks/src/hooks/use_latest.rs b/crates/yew-hooks/src/hooks/use_latest.rs
index 87f3190..7b73846 100644
--- a/crates/yew-hooks/src/hooks/use_latest.rs
+++ b/crates/yew-hooks/src/hooks/use_latest.rs
@@ -102,6 +102,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_mut_latest<T>(value: T) -> UseMutLatestHandle<T>
 where
     T: 'static,
@@ -153,6 +154,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_latest<T>(value: T) -> UseLatestHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_list.rs b/crates/yew-hooks/src/hooks/use_list.rs
index 02dc487..675bceb 100644
--- a/crates/yew-hooks/src/hooks/use_list.rs
+++ b/crates/yew-hooks/src/hooks/use_list.rs
@@ -199,6 +199,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_list<T>(initial_value: Vec<T>) -> UseListHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_local_storage.rs b/crates/yew-hooks/src/hooks/use_local_storage.rs
index bf35034..7dba34c 100644
--- a/crates/yew-hooks/src/hooks/use_local_storage.rs
+++ b/crates/yew-hooks/src/hooks/use_local_storage.rs
@@ -98,13 +98,14 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_local_storage<T>(key: String) -> UseLocalStorageHandle<T>
 where
     T: for<'de> Deserialize<'de> + 'static,
 {
     let inner: UseStateHandle<Option<T>> =
         use_state(|| LocalStorage::get(&key).unwrap_or_default());
-    let key = use_ref(|| key);
+    let key = use_memo(|_| key, ());
 
     {
         let key = key.clone();
diff --git a/crates/yew-hooks/src/hooks/use_location.rs b/crates/yew-hooks/src/hooks/use_location.rs
index 15b7db5..b66483d 100644
--- a/crates/yew-hooks/src/hooks/use_location.rs
+++ b/crates/yew-hooks/src/hooks/use_location.rs
@@ -87,6 +87,7 @@ pub struct LocationState {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_location() -> UseStateHandle<LocationState> {
     let state = use_state(|| build_location("load".to_string()));
 
diff --git a/crates/yew-hooks/src/hooks/use_logger.rs b/crates/yew-hooks/src/hooks/use_logger.rs
index ea467fc..1961e20 100644
--- a/crates/yew-hooks/src/hooks/use_logger.rs
+++ b/crates/yew-hooks/src/hooks/use_logger.rs
@@ -1,6 +1,8 @@
 use std::fmt::Debug;
 use std::rc::Rc;
 
+use yew::prelude::*;
+
 use super::{use_effect_once, use_effect_update, use_effect_update_with_deps, use_previous};
 
 /// This hook logs in console as component goes through life-cycles.
@@ -36,6 +38,7 @@ use super::{use_effect_once, use_effect_update, use_effect_update_with_deps, use
 ///     pub b: String,
 /// }
 /// ```
+#[hook]
 pub fn use_logger<T>(name: String, props: T)
 where
     T: Debug + 'static,
@@ -95,6 +98,7 @@ where
 ///     pub b: String,
 /// }
 /// ```
+#[hook]
 pub fn use_logger_eq<T>(name: String, props: T)
 where
     T: Debug + PartialEq + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_map.rs b/crates/yew-hooks/src/hooks/use_map.rs
index 92f40af..a314b80 100644
--- a/crates/yew-hooks/src/hooks/use_map.rs
+++ b/crates/yew-hooks/src/hooks/use_map.rs
@@ -166,6 +166,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_map<K, V>(initial_value: HashMap<K, V>) -> UseMapHandle<K, V>
 where
     K: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_measure.rs b/crates/yew-hooks/src/hooks/use_measure.rs
index e02c2ec..7fdd25b 100644
--- a/crates/yew-hooks/src/hooks/use_measure.rs
+++ b/crates/yew-hooks/src/hooks/use_measure.rs
@@ -53,6 +53,7 @@ pub struct UseMeasureState {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_measure(node: NodeRef) -> UseMeasureState {
     let state = use_raf_state(UseMeasureState::default);
 
diff --git a/crates/yew-hooks/src/hooks/use_media.rs b/crates/yew-hooks/src/hooks/use_media.rs
index 2bbb0a5..9c7c4bb 100644
--- a/crates/yew-hooks/src/hooks/use_media.rs
+++ b/crates/yew-hooks/src/hooks/use_media.rs
@@ -170,12 +170,14 @@ impl Clone for UseMediaHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_media(node: NodeRef, src: String) -> UseMediaHandle {
     use_media_with_options(node, src, UseMediaOptions::default())
 }
 
 /// This hook plays video or audio and exposes its controls with options.
 /// see [`use_media`]
+#[hook]
 pub fn use_media_with_options(
     node: NodeRef,
     src: String,
diff --git a/crates/yew-hooks/src/hooks/use_mount.rs b/crates/yew-hooks/src/hooks/use_mount.rs
index 97d1797..49d12b7 100644
--- a/crates/yew-hooks/src/hooks/use_mount.rs
+++ b/crates/yew-hooks/src/hooks/use_mount.rs
@@ -1,3 +1,5 @@
+use yew::prelude::*;
+
 use super::use_effect_once;
 
 /// A lifecycle hook that calls a function after the component is mounted.
@@ -22,6 +24,7 @@ use super::use_effect_once;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_mount<Callback>(callback: Callback)
 where
     Callback: FnOnce() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_previous.rs b/crates/yew-hooks/src/hooks/use_previous.rs
index ccc08a7..ef8fc6c 100644
--- a/crates/yew-hooks/src/hooks/use_previous.rs
+++ b/crates/yew-hooks/src/hooks/use_previous.rs
@@ -80,6 +80,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_previous<T>(value: T) -> UsePreviousHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_queue.rs b/crates/yew-hooks/src/hooks/use_queue.rs
index 92cc31b..34cf2cd 100644
--- a/crates/yew-hooks/src/hooks/use_queue.rs
+++ b/crates/yew-hooks/src/hooks/use_queue.rs
@@ -143,6 +143,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_queue<T>(initial_value: VecDeque<T>) -> UseQueueHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_raf.rs b/crates/yew-hooks/src/hooks/use_raf.rs
index 4a8bde1..fe7b362 100644
--- a/crates/yew-hooks/src/hooks/use_raf.rs
+++ b/crates/yew-hooks/src/hooks/use_raf.rs
@@ -26,6 +26,7 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_raf(millis: u32, delay: u32) -> f64 {
     let elapsed = use_state(|| 0f64);
     let start = use_mut_ref(|| 0f64);
diff --git a/crates/yew-hooks/src/hooks/use_raf_state.rs b/crates/yew-hooks/src/hooks/use_raf_state.rs
index cc87df3..24a055d 100644
--- a/crates/yew-hooks/src/hooks/use_raf_state.rs
+++ b/crates/yew-hooks/src/hooks/use_raf_state.rs
@@ -86,6 +86,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_raf_state<T, F>(init_fn: F) -> UseRafStateHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_renders_count.rs b/crates/yew-hooks/src/hooks/use_renders_count.rs
index 9948fd8..e824b70 100644
--- a/crates/yew-hooks/src/hooks/use_renders_count.rs
+++ b/crates/yew-hooks/src/hooks/use_renders_count.rs
@@ -26,6 +26,7 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_renders_count() -> i32 {
     let count = use_mut_ref(|| 0);
 
diff --git a/crates/yew-hooks/src/hooks/use_scroll.rs b/crates/yew-hooks/src/hooks/use_scroll.rs
index 645ca32..743298e 100644
--- a/crates/yew-hooks/src/hooks/use_scroll.rs
+++ b/crates/yew-hooks/src/hooks/use_scroll.rs
@@ -27,6 +27,7 @@ use super::{use_event, use_mount};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_scroll(node: NodeRef) -> (i32, i32) {
     let state = use_state(|| (0, 0));
 
diff --git a/crates/yew-hooks/src/hooks/use_scrolling.rs b/crates/yew-hooks/src/hooks/use_scrolling.rs
index 0d5c17f..6b7ec6c 100644
--- a/crates/yew-hooks/src/hooks/use_scrolling.rs
+++ b/crates/yew-hooks/src/hooks/use_scrolling.rs
@@ -24,6 +24,7 @@ use super::{use_debounce, use_event};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_scrolling(node: NodeRef) -> bool {
     let state = use_state_eq(|| false);
 
diff --git a/crates/yew-hooks/src/hooks/use_search_param.rs b/crates/yew-hooks/src/hooks/use_search_param.rs
index 6218593..5cfc598 100644
--- a/crates/yew-hooks/src/hooks/use_search_param.rs
+++ b/crates/yew-hooks/src/hooks/use_search_param.rs
@@ -27,6 +27,7 @@ use super::use_event_with_window;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_search_param(param: String) -> Option<String> {
     let state = use_state(|| get_param(param.clone()));
 
diff --git a/crates/yew-hooks/src/hooks/use_session_storage.rs b/crates/yew-hooks/src/hooks/use_session_storage.rs
index 6dc5fd1..e979980 100644
--- a/crates/yew-hooks/src/hooks/use_session_storage.rs
+++ b/crates/yew-hooks/src/hooks/use_session_storage.rs
@@ -95,13 +95,14 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_session_storage<T>(key: String) -> UseSessionStorageHandle<T>
 where
     T: for<'de> Deserialize<'de> + 'static,
 {
     let inner: UseStateHandle<Option<T>> =
         use_state(|| SessionStorage::get(&key).unwrap_or_default());
-    let key = use_ref(|| key);
+    let key = use_memo(|_| key, ());
 
     UseSessionStorageHandle { inner, key }
 }
diff --git a/crates/yew-hooks/src/hooks/use_set.rs b/crates/yew-hooks/src/hooks/use_set.rs
index 64b3cfc..6c02c25 100644
--- a/crates/yew-hooks/src/hooks/use_set.rs
+++ b/crates/yew-hooks/src/hooks/use_set.rs
@@ -162,6 +162,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_set<T>(initial_value: HashSet<T>) -> UseSetHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_size.rs b/crates/yew-hooks/src/hooks/use_size.rs
index 98a52d8..9542b53 100644
--- a/crates/yew-hooks/src/hooks/use_size.rs
+++ b/crates/yew-hooks/src/hooks/use_size.rs
@@ -29,6 +29,7 @@ use crate::web_sys_ext::{ResizeObserver, ResizeObserverEntry};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_size(node: NodeRef) -> (u32, u32) {
     let state = use_raf_state(|| (0, 0));
 
diff --git a/crates/yew-hooks/src/hooks/use_state_ptr_eq.rs b/crates/yew-hooks/src/hooks/use_state_ptr_eq.rs
index aa39b0f..b423e86 100644
--- a/crates/yew-hooks/src/hooks/use_state_ptr_eq.rs
+++ b/crates/yew-hooks/src/hooks/use_state_ptr_eq.rs
@@ -92,6 +92,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_state_ptr_eq<T, F>(init_fn: F) -> UseStatePtrEqHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_swipe.rs b/crates/yew-hooks/src/hooks/use_swipe.rs
index 848b7d4..5630f11 100644
--- a/crates/yew-hooks/src/hooks/use_swipe.rs
+++ b/crates/yew-hooks/src/hooks/use_swipe.rs
@@ -95,12 +95,14 @@ impl Clone for UseSwipeHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_swipe(node: NodeRef) -> UseSwipeHandle {
     use_swipe_with_options(node, UseSwipeOptions::default())
 }
 
 /// A sensor hook that detects swipe based on TouchEvent for window.
 /// See [`use_swipe`].
+#[hook]
 pub fn use_swipe_with_window() -> UseSwipeHandle {
     use_swipe_with_options(NodeRef::default(), UseSwipeOptions::default())
 }
@@ -144,6 +146,7 @@ pub fn use_swipe_with_window() -> UseSwipeHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_swipe_with_options(node: NodeRef, options: UseSwipeOptions) -> UseSwipeHandle {
     let swiping = use_state_eq(|| false);
     let direction = use_state_eq(|| UseSwipeDirection::None);
diff --git a/crates/yew-hooks/src/hooks/use_throttle.rs b/crates/yew-hooks/src/hooks/use_throttle.rs
index 7758092..ed0699f 100644
--- a/crates/yew-hooks/src/hooks/use_throttle.rs
+++ b/crates/yew-hooks/src/hooks/use_throttle.rs
@@ -70,6 +70,7 @@ impl Clone for UseThrottleHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_throttle<Callback>(callback: Callback, millis: u32) -> UseThrottleHandle
 where
     Callback: FnMut() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_throttle_effect.rs b/crates/yew-hooks/src/hooks/use_throttle_effect.rs
index e99a639..55804ef 100644
--- a/crates/yew-hooks/src/hooks/use_throttle_effect.rs
+++ b/crates/yew-hooks/src/hooks/use_throttle_effect.rs
@@ -36,6 +36,7 @@ use super::{use_throttle, use_unmount};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_throttle_effect<Callback>(callback: Callback, millis: u32)
 where
     Callback: FnMut() + 'static,
@@ -60,6 +61,7 @@ where
 ///
 /// Whenever the dependencies are changed, the throttle effect is run again.
 /// To detect changes, dependencies must implement `PartialEq`.
+#[hook]
 pub fn use_throttle_effect_with_deps<Callback, Dependents>(
     callback: Callback,
     millis: u32,
diff --git a/crates/yew-hooks/src/hooks/use_throttle_state.rs b/crates/yew-hooks/src/hooks/use_throttle_state.rs
index 47c38a8..0ed7d2b 100644
--- a/crates/yew-hooks/src/hooks/use_throttle_state.rs
+++ b/crates/yew-hooks/src/hooks/use_throttle_state.rs
@@ -70,6 +70,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_throttle_state<T, F>(init_fn: F, millis: u32) -> UseThrottleStateHandle<T>
 where
     T: 'static,
diff --git a/crates/yew-hooks/src/hooks/use_timeout.rs b/crates/yew-hooks/src/hooks/use_timeout.rs
index 788ba43..fb85bc0 100644
--- a/crates/yew-hooks/src/hooks/use_timeout.rs
+++ b/crates/yew-hooks/src/hooks/use_timeout.rs
@@ -72,6 +72,7 @@ impl Clone for UseTimeoutHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_timeout<Callback>(callback: Callback, millis: u32) -> UseTimeoutHandle
 where
     Callback: FnOnce() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_title.rs b/crates/yew-hooks/src/hooks/use_title.rs
index 499f236..00c4090 100644
--- a/crates/yew-hooks/src/hooks/use_title.rs
+++ b/crates/yew-hooks/src/hooks/use_title.rs
@@ -21,8 +21,9 @@ use super::use_unmount;
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_title(title: String) {
-    let pre_title = use_ref(|| gloo::utils::document().title());
+    let pre_title = use_memo(|_| gloo::utils::document().title(), ());
 
     if gloo::utils::document().title() != title {
         gloo::utils::document().set_title(&title);
diff --git a/crates/yew-hooks/src/hooks/use_toggle.rs b/crates/yew-hooks/src/hooks/use_toggle.rs
index be754f6..8603ad7 100644
--- a/crates/yew-hooks/src/hooks/use_toggle.rs
+++ b/crates/yew-hooks/src/hooks/use_toggle.rs
@@ -171,6 +171,7 @@ where
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_bool_toggle(default: bool) -> UseToggleHandle<bool> {
     use_toggle(default, !default)
 }
@@ -204,6 +205,7 @@ pub fn use_bool_toggle(default: bool) -> UseToggleHandle<bool> {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_toggle<T>(default: T, other: T) -> UseToggleHandle<T>
 where
     T: 'static + PartialEq,
diff --git a/crates/yew-hooks/src/hooks/use_unmount.rs b/crates/yew-hooks/src/hooks/use_unmount.rs
index 15f2884..c247878 100644
--- a/crates/yew-hooks/src/hooks/use_unmount.rs
+++ b/crates/yew-hooks/src/hooks/use_unmount.rs
@@ -1,3 +1,5 @@
+use yew::prelude::*;
+
 use super::{use_effect_once, use_mut_latest};
 
 /// A lifecycle hook that calls a function when the component will unmount.
@@ -22,6 +24,7 @@ use super::{use_effect_once, use_mut_latest};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_unmount<Callback>(callback: Callback)
 where
     Callback: FnOnce() + 'static,
diff --git a/crates/yew-hooks/src/hooks/use_update.rs b/crates/yew-hooks/src/hooks/use_update.rs
index 43aee4c..0c039f7 100644
--- a/crates/yew-hooks/src/hooks/use_update.rs
+++ b/crates/yew-hooks/src/hooks/use_update.rs
@@ -26,7 +26,8 @@ use yew::prelude::*;
 ///     }
 /// }
 /// ```
-pub fn use_update() -> Rc<impl Fn()> {
+#[hook]
+pub fn use_update() -> Rc<dyn Fn()> {
     let state = use_state(|| 0);
 
     Rc::new(move || {
diff --git a/crates/yew-hooks/src/hooks/use_web_socket.rs b/crates/yew-hooks/src/hooks/use_web_socket.rs
index d2afffb..c06258f 100644
--- a/crates/yew-hooks/src/hooks/use_web_socket.rs
+++ b/crates/yew-hooks/src/hooks/use_web_socket.rs
@@ -155,6 +155,7 @@ impl Clone for UseWebSocketHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_web_socket(url: String) -> UseWebSocketHandle {
     use_web_socket_with_options(url, UseWebSocketOptions::default())
 }
@@ -222,6 +223,7 @@ pub fn use_web_socket(url: String) -> UseWebSocketHandle {
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_web_socket_with_options(
     url: String,
     options: UseWebSocketOptions,
diff --git a/crates/yew-hooks/src/hooks/use_window_scroll.rs b/crates/yew-hooks/src/hooks/use_window_scroll.rs
index 78805e0..1ca2f50 100644
--- a/crates/yew-hooks/src/hooks/use_window_scroll.rs
+++ b/crates/yew-hooks/src/hooks/use_window_scroll.rs
@@ -26,6 +26,7 @@ use super::{use_event_with_window, use_mount, use_raf_state};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_window_scroll() -> (f64, f64) {
     let state = use_raf_state(|| {
         (
diff --git a/crates/yew-hooks/src/hooks/use_window_size.rs b/crates/yew-hooks/src/hooks/use_window_size.rs
index ce53f3c..c79f751 100644
--- a/crates/yew-hooks/src/hooks/use_window_size.rs
+++ b/crates/yew-hooks/src/hooks/use_window_size.rs
@@ -26,6 +26,7 @@ use super::{use_event_with_window, use_mount, use_raf_state};
 ///     }
 /// }
 /// ```
+#[hook]
 pub fn use_window_size() -> (f64, f64) {
     let state = use_raf_state(|| {
         (
diff --git a/examples/yew-app/Cargo.toml b/examples/yew-app/Cargo.toml
index 28eb47f..53b7e33 100644
--- a/examples/yew-app/Cargo.toml
+++ b/examples/yew-app/Cargo.toml
@@ -16,12 +16,12 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 log = "0.4"
-gloo = "0.4"
+gloo = "0.7"
 js-sys = "0.3"
 serde = "1"
 reqwest = { version = "0.11.7", features = ["json"] }
-yew = "0.19.3"
-yew-router = "0.16.0"
+yew = { git = "https://github.com/yewstack/yew", features=["csr"] }
+yew-router = { git = "https://github.com/yewstack/yew" }
 yew-hooks = { path = "../../crates/yew-hooks" }
 wasm-bindgen = "0.2"
 wasm-logger = "0.2.0"
diff --git a/examples/yew-app/src/app.rs b/examples/yew-app/src/app.rs
index c27c30a..1312adc 100644
--- a/examples/yew-app/src/app.rs
+++ b/examples/yew-app/src/app.rs
@@ -8,9 +8,9 @@ use crate::routes::{switch, AppRoute};
 #[function_component(App)]
 pub fn app() -> Html {
     html! {
-        <BrowserRouter>
+        <HashRouter>
             <Nav />
-            <Switch<AppRoute> render={Switch::render(switch)} />
-        </BrowserRouter>
+            <Switch<AppRoute> render={switch} />
+        </HashRouter>
     }
 }
diff --git a/examples/yew-app/src/lib.rs b/examples/yew-app/src/lib.rs
index 5541973..10da33f 100644
--- a/examples/yew-app/src/lib.rs
+++ b/examples/yew-app/src/lib.rs
@@ -17,6 +17,6 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 #[wasm_bindgen]
 pub fn run() -> Result<(), JsValue> {
     wasm_logger::init(wasm_logger::Config::default());
-    yew::start_app::<App>();
+    yew::Renderer::<App>::new().render();
     Ok(())
 }
diff --git a/examples/yew-app/src/routes/mod.rs b/examples/yew-app/src/routes/mod.rs
index f759272..84c92bd 100644
--- a/examples/yew-app/src/routes/mod.rs
+++ b/examples/yew-app/src/routes/mod.rs
@@ -134,8 +134,8 @@ pub enum AppRoute {
 }
 
 /// Switch app routes
-pub fn switch(routes: &AppRoute) -> Html {
-    match routes.clone() {
+pub fn switch(routes: AppRoute) -> Html {
+    match routes {
         AppRoute::Home => html! { <Home /> },
         AppRoute::About => html! { <About /> },
         AppRoute::UseBoolToggle => html! { <UseBoolToggle /> },