diff --git a/.gitignore b/.gitignore
index a0f085b..89b99b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@ Cargo.lock
 # These are backup files generated by rustfmt
 **/*.rs.bk
 
-/.vscode/
\ No newline at end of file
+/.vscode/
+/.idea/
\ No newline at end of file
diff --git a/Cargo.toml b/Cargo.toml
index dcc65e5..0baa372 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,4 +1,5 @@
 [workspace]
+resolver = "2"
 members = [
     "crates/*",
     "examples/*",
diff --git a/crates/yew-hooks-test/Cargo.toml b/crates/yew-hooks-test/Cargo.toml
index 48442aa..286f0d7 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 = { version = "0.20.0", features=["csr"]}
+yew = { version = "0.21.0", features=["csr"]}
diff --git a/crates/yew-hooks/Cargo.toml b/crates/yew-hooks/Cargo.toml
index de710c7..290f2f1 100644
--- a/crates/yew-hooks/Cargo.toml
+++ b/crates/yew-hooks/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "yew-hooks"
-version = "0.2.0"
+version = "0.3.0"
 edition = "2021"
 authors = ["Jet Li <jing.i.qin@icloud.com>"]
 categories = ["gui", "wasm", "web-programming"]
@@ -16,8 +16,8 @@ documentation = "https://docs.rs/yew-hooks/"
 
 [dependencies]
 log = "0.4"
-yew = { version = "0.20.0", features=["csr"] }
-gloo = "0.8"
+yew = { version = "0.21.0", features=["csr"] }
+gloo = "0.10"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 serde = "1"
diff --git a/crates/yew-hooks/src/hooks/use_clipboard.rs b/crates/yew-hooks/src/hooks/use_clipboard.rs
index b0de3e8..671f5b0 100644
--- a/crates/yew-hooks/src/hooks/use_clipboard.rs
+++ b/crates/yew-hooks/src/hooks/use_clipboard.rs
@@ -127,27 +127,21 @@ 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_memo(
-        |_| {
-            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_memo(
-        |_| {
-            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_debounce_effect.rs b/crates/yew-hooks/src/hooks/use_debounce_effect.rs
index cf09b14..9f5c2bb 100644
--- a/crates/yew-hooks/src/hooks/use_debounce_effect.rs
+++ b/crates/yew-hooks/src/hooks/use_debounce_effect.rs
@@ -96,14 +96,11 @@ pub fn use_debounce_effect_with_deps<Callback, Dependents>(
 
     {
         let debounce = debounce.clone();
-        use_effect_with_deps(
-            move |_| {
-                debounce.run();
+        use_effect_with(deps, move |_| {
+            debounce.run();
 
-                || ()
-            },
-            deps,
-        );
+            || ()
+        });
     }
 
     use_unmount(move || {
diff --git a/crates/yew-hooks/src/hooks/use_default.rs b/crates/yew-hooks/src/hooks/use_default.rs
index 8f17623..582713c 100644
--- a/crates/yew-hooks/src/hooks/use_default.rs
+++ b/crates/yew-hooks/src/hooks/use_default.rs
@@ -90,7 +90,7 @@ where
     F: FnOnce() -> Option<T>,
 {
     let inner = use_state(init_fn);
-    let default = use_memo(|_| 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 3146564..5b31bce 100644
--- a/crates/yew-hooks/src/hooks/use_drag.rs
+++ b/crates/yew-hooks/src/hooks/use_drag.rs
@@ -117,16 +117,13 @@ pub fn use_drag_with_options(node: NodeRef, options: UseDragOptions) -> UseDragH
         });
     }
 
-    use_effect_with_deps(
-        move |node| {
-            if let Some(element) = &node.cast::<Element>() {
-                let _ = element.set_attribute("draggable", "true");
-            }
+    use_effect_with(node, move |node| {
+        if let Some(element) = &node.cast::<Element>() {
+            let _ = element.set_attribute("draggable", "true");
+        }
 
-            || ()
-        },
-        node,
-    );
+        || ()
+    });
 
     UseDragHandle { dragging }
 }
diff --git a/crates/yew-hooks/src/hooks/use_effect_once.rs b/crates/yew-hooks/src/hooks/use_effect_once.rs
index 68bef77..3d788da 100644
--- a/crates/yew-hooks/src/hooks/use_effect_once.rs
+++ b/crates/yew-hooks/src/hooks/use_effect_once.rs
@@ -30,5 +30,5 @@ where
     Callback: FnOnce() -> Destructor + 'static,
     Destructor: FnOnce() + 'static,
 {
-    use_effect_with_deps(move |_| callback(), ());
+    use_effect_with((), move |_| callback());
 }
diff --git a/crates/yew-hooks/src/hooks/use_effect_update.rs b/crates/yew-hooks/src/hooks/use_effect_update.rs
index 228c2f1..ada7ea3 100644
--- a/crates/yew-hooks/src/hooks/use_effect_update.rs
+++ b/crates/yew-hooks/src/hooks/use_effect_update.rs
@@ -57,14 +57,11 @@ pub fn use_effect_update_with_deps<Callback, Destructor, Dependents>(
 {
     let first = use_is_first_mount();
 
-    use_effect_with_deps(
-        move |deps| {
-            if first {
-                Box::new(|| ()) as Box<dyn FnOnce()>
-            } else {
-                Box::new(callback(deps))
-            }
-        },
-        deps,
-    );
+    use_effect_with(deps, move |deps| {
+        if first {
+            Box::new(|| ()) as Box<dyn FnOnce()>
+        } else {
+            Box::new(callback(deps))
+        }
+    });
 }
diff --git a/crates/yew-hooks/src/hooks/use_event.rs b/crates/yew-hooks/src/hooks/use_event.rs
index 27884e2..7003efc 100644
--- a/crates/yew-hooks/src/hooks/use_event.rs
+++ b/crates/yew-hooks/src/hooks/use_event.rs
@@ -41,19 +41,16 @@ where
 {
     let callback = use_latest(callback);
 
-    use_effect_with_deps(
-        move |(node, event_type)| {
-            let window = window();
-            let node = node.get();
-            // If we cannot get the wrapped `Node`, then we use `Window` as the default target of the event.
-            let target = node.as_deref().map_or(&*window, |t| t);
+    use_effect_with((node, event_type.into()), move |(node, event_type)| {
+        let window = window();
+        let node = node.get();
+        // If we cannot get the wrapped `Node`, then we use `Window` as the default target of the event.
+        let target = node.as_deref().map_or(&*window, |t| t);
 
-            // We should only set passive event listeners for `touchstart` and `touchmove`.
-            // See here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners
-            let listener = if event_type == "touchstart"
-                || event_type == "touchmove"
-                || event_type == "scroll"
-            {
+        // We should only set passive event listeners for `touchstart` and `touchmove`.
+        // See here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners
+        let listener =
+            if event_type == "touchstart" || event_type == "touchmove" || event_type == "scroll" {
                 Some(EventListener::new(
                     target,
                     event_type.clone(),
@@ -72,10 +69,8 @@ where
                 ))
             };
 
-            move || drop(listener)
-        },
-        (node, event_type.into()),
-    );
+        move || drop(listener)
+    });
 }
 
 /// A hook that subscribes a callback to events only for window.
diff --git a/crates/yew-hooks/src/hooks/use_favicon.rs b/crates/yew-hooks/src/hooks/use_favicon.rs
index fb0fb5f..d26a285 100644
--- a/crates/yew-hooks/src/hooks/use_favicon.rs
+++ b/crates/yew-hooks/src/hooks/use_favicon.rs
@@ -25,30 +25,27 @@ use yew::prelude::*;
 /// ```
 #[hook]
 pub fn use_favicon(href: String) {
-    use_effect_with_deps(
-        move |href| {
-            let link = {
-                if let Ok(Some(link)) = document().query_selector("link[rel*='icon']") {
-                    link
-                } else {
-                    document().create_element("link").unwrap_throw()
-                }
+    use_effect_with(href, move |href| {
+        let link = {
+            if let Ok(Some(link)) = document().query_selector("link[rel*='icon']") {
+                link
+            } else {
+                document().create_element("link").unwrap_throw()
             }
-            .dyn_into::<HtmlLinkElement>()
-            .unwrap_throw();
+        }
+        .dyn_into::<HtmlLinkElement>()
+        .unwrap_throw();
 
-            link.set_type("image/x-icon");
-            link.set_rel("shortcut icon");
-            link.set_href(href);
+        link.set_type("image/x-icon");
+        link.set_rel("shortcut icon");
+        link.set_href(href);
 
-            let head = document()
-                .get_elements_by_tag_name("head")
-                .item(0)
-                .unwrap_throw();
-            let _ = head.append_child(&link.dyn_into::<Node>().unwrap_throw());
+        let head = document()
+            .get_elements_by_tag_name("head")
+            .item(0)
+            .unwrap_throw();
+        let _ = head.append_child(&link.dyn_into::<Node>().unwrap_throw());
 
-            || ()
-        },
-        href,
-    );
+        || ()
+    });
 }
diff --git a/crates/yew-hooks/src/hooks/use_infinite_scroll.rs b/crates/yew-hooks/src/hooks/use_infinite_scroll.rs
index 16d3b31..8a98d57 100644
--- a/crates/yew-hooks/src/hooks/use_infinite_scroll.rs
+++ b/crates/yew-hooks/src/hooks/use_infinite_scroll.rs
@@ -47,17 +47,14 @@ where
 
     {
         let load_more = load_more.clone();
-        use_effect_with_deps(
-            move |load_more| {
-                if **load_more {
-                    let callback = &*callback_ref.current();
-                    callback();
-                }
+        use_effect_with(load_more, move |load_more| {
+            if **load_more {
+                let callback = &*callback_ref.current();
+                callback();
+            }
 
-                || ()
-            },
-            load_more,
-        );
+            || ()
+        });
     }
 
     let debounce = {
diff --git a/crates/yew-hooks/src/hooks/use_interval.rs b/crates/yew-hooks/src/hooks/use_interval.rs
index 340714c..e445ff6 100644
--- a/crates/yew-hooks/src/hooks/use_interval.rs
+++ b/crates/yew-hooks/src/hooks/use_interval.rs
@@ -39,20 +39,17 @@ where
     let callback_ref = use_mut_latest(callback);
     let interval_ref = use_mut_ref(|| None);
 
-    use_effect_with_deps(
-        move |millis| {
-            if *millis > 0 {
-                *interval_ref.borrow_mut() = Some(Interval::new(*millis, move || {
-                    let callback_ref = callback_ref.current();
-                    let callback = &mut *callback_ref.borrow_mut();
-                    callback();
-                }));
-            } else {
-                *interval_ref.borrow_mut() = None;
-            }
+    use_effect_with(millis, move |millis| {
+        if *millis > 0 {
+            *interval_ref.borrow_mut() = Some(Interval::new(*millis, move || {
+                let callback_ref = callback_ref.current();
+                let callback = &mut *callback_ref.borrow_mut();
+                callback();
+            }));
+        } else {
+            *interval_ref.borrow_mut() = None;
+        }
 
-            move || *interval_ref.borrow_mut() = None
-        },
-        millis,
-    );
+        move || *interval_ref.borrow_mut() = None
+    });
 }
diff --git a/crates/yew-hooks/src/hooks/use_local_storage.rs b/crates/yew-hooks/src/hooks/use_local_storage.rs
index 95c72e7..51baa5c 100644
--- a/crates/yew-hooks/src/hooks/use_local_storage.rs
+++ b/crates/yew-hooks/src/hooks/use_local_storage.rs
@@ -105,7 +105,7 @@ where
 {
     let inner: UseStateHandle<Option<T>> =
         use_state(|| LocalStorage::get(&key).unwrap_or_default());
-    let key = use_memo(|_| key, ());
+    let key = use_memo((), |_| key);
 
     {
         let key = key.clone();
diff --git a/crates/yew-hooks/src/hooks/use_measure.rs b/crates/yew-hooks/src/hooks/use_measure.rs
index 14f1476..5430619 100644
--- a/crates/yew-hooks/src/hooks/use_measure.rs
+++ b/crates/yew-hooks/src/hooks/use_measure.rs
@@ -59,37 +59,33 @@ pub fn use_measure(node: NodeRef) -> UseMeasureState {
 
     {
         let state = state.clone();
-        use_effect_with_deps(
-            move |node| {
-                let closure = Closure::wrap(Box::new(move |entries: Vec<ResizeObserverEntry>| {
-                    for entry in &entries {
-                        let rect = entry.content_rect();
-                        state.set(UseMeasureState {
-                            x: rect.x(),
-                            y: rect.y(),
-                            width: rect.width(),
-                            height: rect.height(),
-                            top: rect.top(),
-                            left: rect.left(),
-                            bottom: rect.bottom(),
-                            right: rect.right(),
-                        });
-                    }
-                })
-                    as Box<dyn Fn(Vec<ResizeObserverEntry>)>);
+        use_effect_with(node, move |node| {
+            let closure = Closure::wrap(Box::new(move |entries: Vec<ResizeObserverEntry>| {
+                for entry in &entries {
+                    let rect = entry.content_rect();
+                    state.set(UseMeasureState {
+                        x: rect.x(),
+                        y: rect.y(),
+                        width: rect.width(),
+                        height: rect.height(),
+                        top: rect.top(),
+                        left: rect.left(),
+                        bottom: rect.bottom(),
+                        right: rect.right(),
+                    });
+                }
+            }) as Box<dyn Fn(Vec<ResizeObserverEntry>)>);
 
-                let observer = ResizeObserver::new(closure.as_ref().unchecked_ref()).unwrap_throw();
-                // Forget the closure to keep it alive
-                closure.forget();
+            let observer = ResizeObserver::new(closure.as_ref().unchecked_ref()).unwrap_throw();
+            // Forget the closure to keep it alive
+            closure.forget();
 
-                if let Some(element) = &node.cast::<Element>() {
-                    observer.observe(element);
-                }
+            if let Some(element) = &node.cast::<Element>() {
+                observer.observe(element);
+            }
 
-                move || observer.disconnect()
-            },
-            node,
-        );
+            move || observer.disconnect()
+        });
     }
 
     (*state).clone()
diff --git a/crates/yew-hooks/src/hooks/use_media.rs b/crates/yew-hooks/src/hooks/use_media.rs
index cef7e65..0e3848e 100644
--- a/crates/yew-hooks/src/hooks/use_media.rs
+++ b/crates/yew-hooks/src/hooks/use_media.rs
@@ -413,25 +413,22 @@ pub fn use_media_with_options(
         let paused = paused.clone();
         let play = play.clone();
         let auto_play = options.auto_play;
-        use_effect_with_deps(
-            move |(node, src)| {
-                if let Some(media) = node.cast::<HtmlMediaElement>() {
-                    media.set_controls(false);
-                    media.set_src(src);
+        use_effect_with((node, src), move |(node, src)| {
+            if let Some(media) = node.cast::<HtmlMediaElement>() {
+                media.set_controls(false);
+                media.set_src(src);
 
-                    volume.set(media.volume());
-                    muted.set(media.muted());
-                    paused.set(media.paused());
+                volume.set(media.volume());
+                muted.set(media.muted());
+                paused.set(media.paused());
 
-                    if auto_play && media.paused() {
-                        play();
-                    }
+                if auto_play && media.paused() {
+                    play();
                 }
+            }
 
-                || ()
-            },
-            (node, src),
-        );
+            || ()
+        });
     }
 
     UseMediaHandle {
diff --git a/crates/yew-hooks/src/hooks/use_raf.rs b/crates/yew-hooks/src/hooks/use_raf.rs
index 86d05ee..00be594 100644
--- a/crates/yew-hooks/src/hooks/use_raf.rs
+++ b/crates/yew-hooks/src/hooks/use_raf.rs
@@ -38,68 +38,64 @@ pub fn use_raf(millis: u32, delay: u32) -> f64 {
 
     {
         let elapsed = elapsed.clone();
-        use_effect_with_deps(
-            move |(millis, delay)| {
-                let millis = *millis;
-                let delay = *delay;
-                *start.borrow_mut() = 0f64;
+        use_effect_with((millis, delay), move |(millis, delay)| {
+            let millis = *millis;
+            let delay = *delay;
+            *start.borrow_mut() = 0f64;
 
-                {
-                    let raf = raf.clone();
-                    let elapsed = elapsed.clone();
-                    *on_frame_clone.borrow_mut() = Some(Box::new(move |time: f64| {
-                        let on_frame = on_frame.clone();
-                        if *start.borrow() <= 0f64 {
-                            *start.borrow_mut() = time;
-                        }
-                        let time = min_by(
-                            1f64,
-                            (time - *start.borrow()) / f64::from(millis),
-                            |x, y| x.partial_cmp(y).unwrap(),
-                        );
-                        elapsed.set(time);
+            {
+                let raf = raf.clone();
+                let elapsed = elapsed.clone();
+                *on_frame_clone.borrow_mut() = Some(Box::new(move |time: f64| {
+                    let on_frame = on_frame.clone();
+                    if *start.borrow() <= 0f64 {
+                        *start.borrow_mut() = time;
+                    }
+                    let time = min_by(
+                        1f64,
+                        (time - *start.borrow()) / f64::from(millis),
+                        |x, y| x.partial_cmp(y).unwrap(),
+                    );
+                    elapsed.set(time);
 
-                        // Schedule ourself for another requestAnimationFrame callback.
-                        // Ref: https://github.com/rustwasm/wasm-bindgen/blob/main/examples/request-animation-frame/src/lib.rs
-                        *raf.borrow_mut() = Some(request_animation_frame(move |time| {
-                            let on_frame = on_frame.borrow();
-                            #[allow(clippy::borrowed_box)]
-                            let on_frame: &Box<dyn Fn(f64)> = on_frame.as_ref().unwrap();
-                            on_frame(time);
-                        }));
-                    }) as Box<dyn Fn(f64)>);
-                }
-
-                {
-                    let raf = raf.clone();
-                    let timer_stop = timer_stop.clone();
-                    *timer_delay.borrow_mut() = Some(Timeout::new(delay, move || {
-                        {
-                            let raf = raf.clone();
-                            *timer_stop.borrow_mut() = Some(Timeout::new(millis, move || {
-                                *raf.borrow_mut() = None;
-                                elapsed.set(1f64);
-                            }));
-                        }
+                    // Schedule ourself for another requestAnimationFrame callback.
+                    // Ref: https://github.com/rustwasm/wasm-bindgen/blob/main/examples/request-animation-frame/src/lib.rs
+                    *raf.borrow_mut() = Some(request_animation_frame(move |time| {
+                        let on_frame = on_frame.borrow();
+                        #[allow(clippy::borrowed_box)]
+                        let on_frame: &Box<dyn Fn(f64)> = on_frame.as_ref().unwrap();
+                        on_frame(time);
+                    }));
+                }) as Box<dyn Fn(f64)>);
+            }
 
-                        *raf.borrow_mut() = Some(request_animation_frame(move |time| {
-                            let on_frame_clone = on_frame_clone.borrow();
-                            #[allow(clippy::borrowed_box)]
-                            let on_frame_clone: &Box<dyn Fn(f64)> =
-                                on_frame_clone.as_ref().unwrap();
-                            on_frame_clone(time);
+            {
+                let raf = raf.clone();
+                let timer_stop = timer_stop.clone();
+                *timer_delay.borrow_mut() = Some(Timeout::new(delay, move || {
+                    {
+                        let raf = raf.clone();
+                        *timer_stop.borrow_mut() = Some(Timeout::new(millis, move || {
+                            *raf.borrow_mut() = None;
+                            elapsed.set(1f64);
                         }));
+                    }
+
+                    *raf.borrow_mut() = Some(request_animation_frame(move |time| {
+                        let on_frame_clone = on_frame_clone.borrow();
+                        #[allow(clippy::borrowed_box)]
+                        let on_frame_clone: &Box<dyn Fn(f64)> = on_frame_clone.as_ref().unwrap();
+                        on_frame_clone(time);
                     }));
-                }
+                }));
+            }
 
-                move || {
-                    *raf.borrow_mut() = None;
-                    *timer_stop.borrow_mut() = None;
-                    *timer_delay.borrow_mut() = None;
-                }
-            },
-            (millis, delay),
-        );
+            move || {
+                *raf.borrow_mut() = None;
+                *timer_stop.borrow_mut() = None;
+                *timer_delay.borrow_mut() = None;
+            }
+        });
     }
 
     *elapsed
diff --git a/crates/yew-hooks/src/hooks/use_session_storage.rs b/crates/yew-hooks/src/hooks/use_session_storage.rs
index 59428f3..3edeaa7 100644
--- a/crates/yew-hooks/src/hooks/use_session_storage.rs
+++ b/crates/yew-hooks/src/hooks/use_session_storage.rs
@@ -102,7 +102,7 @@ where
 {
     let inner: UseStateHandle<Option<T>> =
         use_state(|| SessionStorage::get(&key).unwrap_or_default());
-    let key = use_memo(|_| key, ());
+    let key = use_memo((), |_| key);
 
     UseSessionStorageHandle { inner, key }
 }
diff --git a/crates/yew-hooks/src/hooks/use_size.rs b/crates/yew-hooks/src/hooks/use_size.rs
index dfc793f..2420b3b 100644
--- a/crates/yew-hooks/src/hooks/use_size.rs
+++ b/crates/yew-hooks/src/hooks/use_size.rs
@@ -35,31 +35,27 @@ pub fn use_size(node: NodeRef) -> (u32, u32) {
 
     {
         let state = state.clone();
-        use_effect_with_deps(
-            move |node| {
-                let closure = Closure::wrap(Box::new(move |entries: Vec<ResizeObserverEntry>| {
-                    for entry in &entries {
-                        let element = entry.target();
-                        state.set((
-                            element.client_width() as u32,
-                            element.client_height() as u32,
-                        ));
-                    }
-                })
-                    as Box<dyn Fn(Vec<ResizeObserverEntry>)>);
+        use_effect_with(node, move |node| {
+            let closure = Closure::wrap(Box::new(move |entries: Vec<ResizeObserverEntry>| {
+                for entry in &entries {
+                    let element = entry.target();
+                    state.set((
+                        element.client_width() as u32,
+                        element.client_height() as u32,
+                    ));
+                }
+            }) as Box<dyn Fn(Vec<ResizeObserverEntry>)>);
 
-                let observer = ResizeObserver::new(closure.as_ref().unchecked_ref()).unwrap_throw();
-                // Forget the closure to keep it alive
-                closure.forget();
+            let observer = ResizeObserver::new(closure.as_ref().unchecked_ref()).unwrap_throw();
+            // Forget the closure to keep it alive
+            closure.forget();
 
-                if let Some(element) = &node.cast::<Element>() {
-                    observer.observe(element);
-                }
+            if let Some(element) = &node.cast::<Element>() {
+                observer.observe(element);
+            }
 
-                move || observer.disconnect()
-            },
-            node,
-        );
+            move || observer.disconnect()
+        });
     }
 
     *state
diff --git a/crates/yew-hooks/src/hooks/use_throttle_effect.rs b/crates/yew-hooks/src/hooks/use_throttle_effect.rs
index 55804ef..09c2b1e 100644
--- a/crates/yew-hooks/src/hooks/use_throttle_effect.rs
+++ b/crates/yew-hooks/src/hooks/use_throttle_effect.rs
@@ -74,14 +74,11 @@ pub fn use_throttle_effect_with_deps<Callback, Dependents>(
 
     {
         let throttle = throttle.clone();
-        use_effect_with_deps(
-            move |_| {
-                throttle.run();
+        use_effect_with(deps, move |_| {
+            throttle.run();
 
-                || ()
-            },
-            deps,
-        );
+            || ()
+        });
     }
 
     use_unmount(move || {
diff --git a/crates/yew-hooks/src/hooks/use_timeout.rs b/crates/yew-hooks/src/hooks/use_timeout.rs
index 384356c..9652cb6 100644
--- a/crates/yew-hooks/src/hooks/use_timeout.rs
+++ b/crates/yew-hooks/src/hooks/use_timeout.rs
@@ -109,14 +109,11 @@ where
     {
         let reset = reset.clone();
         let timeout_ref = timeout_ref.clone();
-        use_effect_with_deps(
-            move |_| {
-                reset();
+        use_effect_with(millis, move |_| {
+            reset();
 
-                move || *timeout_ref.borrow_mut() = None
-            },
-            millis,
-        );
+            move || *timeout_ref.borrow_mut() = None
+        });
     }
 
     use_unmount(move || {
diff --git a/crates/yew-hooks/src/hooks/use_title.rs b/crates/yew-hooks/src/hooks/use_title.rs
index 4c8bc07..c541135 100644
--- a/crates/yew-hooks/src/hooks/use_title.rs
+++ b/crates/yew-hooks/src/hooks/use_title.rs
@@ -23,7 +23,7 @@ use super::use_unmount;
 /// ```
 #[hook]
 pub fn use_title(title: String) {
-    let pre_title = use_memo(|_| 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_websocket.rs b/crates/yew-hooks/src/hooks/use_websocket.rs
index 30020fd..fd11804 100644
--- a/crates/yew-hooks/src/hooks/use_websocket.rs
+++ b/crates/yew-hooks/src/hooks/use_websocket.rs
@@ -488,16 +488,13 @@ pub fn use_websocket_with_options(url: String, options: UseWebSocketOptions) ->
 
     {
         let open = open.clone();
-        use_effect_with_deps(
-            move |(_, manual)| {
-                if !*manual {
-                    open();
-                }
+        use_effect_with((url, manual), move |(_, manual)| {
+            if !*manual {
+                open();
+            }
 
-                || ()
-            },
-            (url, manual),
-        );
+            || ()
+        });
     }
 
     {
diff --git a/examples/yew-app/Cargo.toml b/examples/yew-app/Cargo.toml
index f076edd..a78b7b0 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.8"
+gloo = "0.10"
 js-sys = "0.3"
 serde = "1"
 reqwest = { version = "0.11.7", features = ["json"] }
-yew = { version = "0.20.0", features=["csr"] }
-yew-router = { version = "0.17.0" }
+yew = { version = "0.21.0", features=["csr"] }
+yew-router = { version = "0.18.0" }
 yew-hooks = { path = "../../crates/yew-hooks" }
 wasm-bindgen = "0.2"
 wasm-logger = "0.2.0"
diff --git a/examples/yew-app/src/app/hooks/use_effect_update.rs b/examples/yew-app/src/app/hooks/use_effect_update.rs
index c68a6db..21aa641 100644
--- a/examples/yew-app/src/app/hooks/use_effect_update.rs
+++ b/examples/yew-app/src/app/hooks/use_effect_update.rs
@@ -12,14 +12,10 @@ pub fn UseEffectUpdate() -> Html {
 
     {
         let count_effect = count_effect.clone();
-        let count = count.clone();
-        use_effect_with_deps(
-            move |_| {
-                count_effect.set(*count_effect + 1);
-                || ()
-            },
-            count,
-        );
+        use_effect_with(count.clone(), move |_| {
+            count_effect.set(*count_effect + 1);
+            || ()
+        });
     }
 
     {
diff --git a/examples/yew-app/src/app/hooks/use_state_ptr_eq.rs b/examples/yew-app/src/app/hooks/use_state_ptr_eq.rs
index d1094d7..4fd906a 100644
--- a/examples/yew-app/src/app/hooks/use_state_ptr_eq.rs
+++ b/examples/yew-app/src/app/hooks/use_state_ptr_eq.rs
@@ -18,14 +18,11 @@ pub fn UseStatePtrEq() -> Html {
     {
         let history = history.clone();
         // This effect will not run if use `use_state` or `use_state_eq`.
-        use_effect_with_deps(
-            move |message| {
-                history.push((**message).clone());
+        use_effect_with(state, move |message| {
+            history.push((**message).clone());
 
-                || ()
-            },
-            state,
-        );
+            || ()
+        });
     }
 
     html! {
diff --git a/examples/yew-app/src/app/hooks/use_swipe.rs b/examples/yew-app/src/app/hooks/use_swipe.rs
index 7c4bde3..6890280 100644
--- a/examples/yew-app/src/app/hooks/use_swipe.rs
+++ b/examples/yew-app/src/app/hooks/use_swipe.rs
@@ -11,20 +11,17 @@ pub fn UseSwipe() -> Html {
     // You can depend on direction/swiping etc.
     {
         let state = state.clone();
-        use_effect_with_deps(
-            move |direction| {
-                // Do something based on direction.
-                match **direction {
-                    UseSwipeDirection::Left => (),
-                    UseSwipeDirection::Right => (),
-                    UseSwipeDirection::Up => (),
-                    UseSwipeDirection::Down => (),
-                    _ => (),
-                }
-                || ()
-            },
-            state.direction,
-        );
+        use_effect_with(state.direction, move |direction| {
+            // Do something based on direction.
+            match **direction {
+                UseSwipeDirection::Left => (),
+                UseSwipeDirection::Right => (),
+                UseSwipeDirection::Up => (),
+                UseSwipeDirection::Down => (),
+                _ => (),
+            }
+            || ()
+        });
     }
 
     // Demo #2, detect swipe for window with options, or use `use_swipe_with_window`.
diff --git a/examples/yew-app/src/app/hooks/use_websocket.rs b/examples/yew-app/src/app/hooks/use_websocket.rs
index a827a10..c900957 100644
--- a/examples/yew-app/src/app/hooks/use_websocket.rs
+++ b/examples/yew-app/src/app/hooks/use_websocket.rs
@@ -23,15 +23,12 @@ pub fn UseWebSocket() -> Html {
         let history = history.clone();
         let ws = ws.clone();
         // Receive message by depending on `ws.message`.
-        use_effect_with_deps(
-            move |message| {
-                if let Some(message) = &**message {
-                    history.push(format!("ws1 [recv]: {}", message.clone()));
-                }
-                || ()
-            },
-            ws.message,
-        );
+        use_effect_with(ws.message, move |message| {
+            if let Some(message) = &**message {
+                history.push(format!("ws1 [recv]: {}", message.clone()));
+            }
+            || ()
+        });
     }
 
     // Demo #2, send bytes to websocket.
@@ -48,15 +45,12 @@ pub fn UseWebSocket() -> Html {
         let history = history.clone();
         let ws = ws.clone();
         // Receive message by depending on `ws.message_bytes`.
-        use_effect_with_deps(
-            move |message| {
-                if let Some(message) = &**message {
-                    history.push(format!("ws1 [recv]: bytes {:?}", message.clone()));
-                }
-                || ()
-            },
-            ws.message_bytes,
-        );
+        use_effect_with(ws.message_bytes, move |message| {
+            if let Some(message) = &**message {
+                history.push(format!("ws1 [recv]: bytes {:?}", message.clone()));
+            }
+            || ()
+        });
     }
 
     // Demo #3, manually connect to websocket with custom options.