Add use_callback hook

[jetli]

Description

• Add use_callback hook, used for obtaining an immutable reference to a memoized Callback, simply a clone of useCallback of React: https://reactjs.org/docs/hooks-reference.html#usecallback
• Add doc example for use_memo hook

Checklist

• I have run cargo make pr-flow
• I have reviewed my own code
• I have added tests

[github-actions]

Visit the preview URL for this PR (updated for commit e92a224):

https://yew-rs--pr2566-use-callback-cm306hsq.web.app

_{(expires Fri, 08 Apr 2022 06:46:28 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[github-actions]

Size Comparison

examples	master (KB)	pull request (KB)	diff
boids	311.369	311.369	0
contexts	233.381	233.381	0
counter	164.549	164.549	0
dyn_create_destroy_apps	172.902	172.902	0
file_upload	194.978	194.978	0
function_memory_game	351.644	351.644	0
function_router	22.254	22.254	0
function_todomvc	327.006	327.006	0
futures	362.344	362.344	0
game_of_life	207.216	207.216	0
inner_html	156.415	156.415	0
js_callback	171.903	171.903	0
keyed_list	329.064	329.064	0
mount_point	163.721	163.721	0
nested_list	225.379	225.379	0
node_refs	170.802	170.802	0
password_strength	1851.783	1851.783	0
portals	184.307	184.307	0
router	589.899	589.899	0
suspense	222.801	222.801	0
timer	170.392	170.392	0
todomvc	270.743	270.743	0
two_apps	166.012	166.012	0
webgl	170.817	170.817	0

[futursolo]

Unless I am missing something, this can simply be
(*use_memo(move |_| Callback::from(f), deps)).clone()?

[jetli]

You are correct, updated

[jetli]

then I'm wondering whether we need to add use_callback at all? but React uses useCallback a lot for performance.

[jetli]

another issue, the array of dependencies is not passed as arguments to the callback, if callback wants to consume deps, that might not be convenient.

[jetli]

let oncallback = {
    let counter = counter.clone();
    let counter2 = counter.clone();
    use_callback(
        move |e| *counter2,
        counter
    )
};

vs

let oncallback = {
    let counter = counter.clone();
    use_memo(
        move |counter| {
            Callback::from(move |e| **counter)
        },
        counter
    )
};

[jetli]

@futursolo any advice?

[futursolo]

I believe that React has a separate useCallback primarily due to useMemo(() => () => {}, []) looks a little bit complicated. I think in this case, if use_callback manages deps for you, it might still be worth it.

So one can do something like:

use_callback(move |deps| move |in_type| {}, deps);
// or have some magic by wrapping it in a custom closure.
use_callback(|deps, in_type| {}, deps);

[jetli]

use_callback(|deps, in_type| {}, deps); looks interesting, I'll have a try.

[voidpumpkin]

Why not just use use_memo?
All i see this hook does is remove the boilerplate of writing Callback::from(/* my closure*/)

[voidpumpkin]

Ah but i guess it wont hurt...

Love the docs and tests 👍

[hamza1311]

The only thing it changes is the reduced boilerplate and Rc::new to Rc::clone on creating a callback, right?

[jetli]

@hamza1311 use_memo returns Rc<T>, so Rc<Callback> will have a redundant Rc as Callback has already Rc internally. Instead use_callback returns Callback<IN, OUT> directly which is concise and can be used for DOM events directly.
The only thing now is whether we should use this signature use_callback(|deps, in_type| {}, deps); mentioned by @futursolo , which is convenient to consume deps, I'm still trying to figure it out.

[hamza1311]

I meant the difference between Callback::from and use_callback, not use_memo(|_| callback, ()) and use_callback. In that case, the only benefit I can think of is not recreating the Rc

[jetli]

The difference between Callback::from and use_callback is:

• Callback uses Rc::ptr_eq for PartialEq, and Callback::from creates a new instance for every render, if parent comp passes callbacks to child comp, this may cause child comp to rerender every time.
• use_callback uses use_memo internally, so it will return the same instance if last_deps == deps, then child comp will not rerender and gain some performance improvement.

React projects uses useCallback a lot, like const cb = useCallback(() => {}, []);