Create a use_memo hook

[voidpumpkin]

There are cases when you want to put all use_effect_with_deps dependencies into the dependency array.
Even including all Callbacks, as it is possible that your callback will become state and is going to have closure into an old state value.

But if that callback is created every time you render, that use_effect_with_deps is also going to trigger every time.
A solution would be to put that Callback into a use_memo hook, like react use_memo or use_callback.

Here is rough implementation:

use std::ops::Deref;

use yew::prelude::*;

/// Creates a memoized value
/// Takes a create_value_fn function that produces a value
/// And later only updates the value only if dependencies changed
///
/// This hook is beneficial when you don't want
/// children components to rerender every time parent renders
///
/// This hook mimics react [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)
/// and [use_memo](https://reactjs.org/docs/hooks-reference.html#usememo)
pub fn use_memo<T, F, Dependents>(create_value_fn: F, deps: Dependents) -> UseStateHandle<T>
where
    T: 'static + Clone,
    F: FnOnce() -> T + Clone + 'static,
    Dependents: PartialEq + 'static,
{
    let value_handle = use_state(create_value_fn.clone());

    let value_handle_clone = value_handle.clone();
    use_effect_with_deps(
        move |_| {
            value_handle_clone.set(create_value_fn());
            || {}
        },
        deps,
    );

    value_handle
}

[futursolo]

Yew already has use_ref which is use_memo without dependencies (renders once).

I think we should have some consistency in terms of naming. use_* without dependency and use_*_with_deps with dependency.

But I am not sure whether we should make use_ref use_memo and make with the dependency use_memo_with_deps or simply keep current naming and go with use_ref_with_deps.

[voidpumpkin]

@futursolo I don't think use_ref works as you need for your hook users to rerender on value change
In that sense use_memo works as we have noting like it then.

[futursolo]

@futursolo I don't think use_ref works as you need for your hook users to rerender on value change
In that sense use_memo works as we have noting like it then.

What I am saying is that: use_ref(|| { ... }) = use_memo(|_| { ... }, ()).

So should it follow the *_with_deps like we had for other hooks? (Or simply remove use_ref in favour of use_memo.)

[voidpumpkin]

@futursolo I don't think use_ref works as you need for your hook users to rerender on value change
In that sense use_memo works as we have noting like it then.

What I am saying is that: use_ref(|| { ... }) = use_memo(|_| { ... }, ()).

So should it follow the *_with_deps like we had for other hooks? (Or simply remove use_ref in favour of use_memo.)

I think you should not be able to set memo yourself, it would only get updated from changed dependencies. That is the main difference from use_ref.
use_ref is just a state storage that does not trigger rerenders.

[futursolo]

I think you should not be able to set memo yourself

You cannot set use_ref value as well. It returns Rc<T>.

React's useRef equivalent is use_mut_ref, which is Rc<RefCell<T>> where you can set the value without triggering re-render.

My suggestion would be:

use_ref -> use_memo + optional re-render upon dependency changes.
use_mut_ref -> use_ref