diff --git a/packages/yew/src/functional/hooks/use_callback.rs b/packages/yew/src/functional/hooks/use_callback.rs
index ce0cdfc7cde..9dce0ad4e4b 100644
--- a/packages/yew/src/functional/hooks/use_callback.rs
+++ b/packages/yew/src/functional/hooks/use_callback.rs
@@ -1,3 +1,5 @@
+use std::rc::Rc;
+
 use crate::callback::Callback;
 use crate::functional::{hook, use_memo};
 
@@ -37,15 +39,17 @@ use crate::functional::{hook, use_memo};
 ///     // This callback depends on (), so it's created only once, then MyComponent
 ///     // will be rendered only once even when you click the button mutiple times.
 ///     let callback = use_callback(
-///         move |name| format!("Hello, {}!", name),
+///         move |name, _| format!("Hello, {}!", name),
 ///         ()
 ///     );
 ///
-///     // It can also be used for events.
+///     // It can also be used for events, this callback depends on `counter`.
 ///     let oncallback = {
 ///         let counter = counter.clone();
 ///         use_callback(
-///             move |_e| (),
+///             move |_e, counter| {
+///                 let _ = **counter;
+///             },
 ///             counter
 ///         )
 ///     };
@@ -68,8 +72,18 @@ pub fn use_callback<IN, OUT, F, D>(f: F, deps: D) -> Callback<IN, OUT>
 where
     IN: 'static,
     OUT: 'static,
-    F: Fn(IN) -> OUT + 'static,
+    F: Fn(IN, &D) -> OUT + 'static,
     D: PartialEq + 'static,
 {
-    (*use_memo(move |_| Callback::from(f), deps)).clone()
+    let deps = Rc::new(deps);
+
+    (*use_memo(
+        move |deps| {
+            let deps = deps.clone();
+            let f = move |value: IN| f(value, deps.as_ref());
+            Callback::from(f)
+        },
+        deps,
+    ))
+    .clone()
 }
diff --git a/packages/yew/tests/use_callback.rs b/packages/yew/tests/use_callback.rs
index af8085763f1..31b8faf0d71 100644
--- a/packages/yew/tests/use_callback.rs
+++ b/packages/yew/tests/use_callback.rs
@@ -42,7 +42,7 @@ async fn use_callback_works() {
     fn use_callback_comp() -> Html {
         let state = use_state(|| 0);
 
-        let callback = use_callback(move |name| format!("Hello, {}!", name), ());
+        let callback = use_callback(move |name, _| format!("Hello, {}!", name), ());
 
         use_effect(move || {
             if *state < 5 {
diff --git a/website/docs/concepts/function-components/hooks/use-callback.mdx b/website/docs/concepts/function-components/hooks/use-callback.mdx
index d33ebe47ded..03645f71d20 100644
--- a/website/docs/concepts/function-components/hooks/use-callback.mdx
+++ b/website/docs/concepts/function-components/hooks/use-callback.mdx
@@ -37,15 +37,17 @@ fn callback() -> Html {
     // This callback depends on (), so it's created only once, then MyComponent
     // will be rendered only once even when you click the button mutiple times.
     let callback = use_callback(
-        move |name| format!("Hello, {}!", name),
+        move |name, _| format!("Hello, {}!", name),
         ()
     );
 
-    // It can also be used for events.
+    // It can also be used for events, this callback depends on `counter`.
     let oncallback = {
         let counter = counter.clone();
         use_callback(
-            move |_e| (),
+            move |_e, counter| {
+                let _ = **counter;
+            },
             counter
         )
     };