How to call a callback that changes state after a promise is done?

[ChocolateLoverRaj]

Code: https://github.com/ChocolateLoverRaj/wasm-react/blob/22e907110b0bc5156669d3c0c268d774432f8380/examples/01-hello-world/src/lib.rs#L47-L69

struct DelayedButton<T: FnMut() + Clone> {
  callback: T,
}

impl<T: FnMut() + Clone + 'static> Component for DelayedButton<T> {
  fn render(&self) -> VNode {
    let mut callback = self.callback.clone();
    h!(button)
      .on_click(&Callback::new(move |_| {
        // This works
        callback();

        // This doesn't work
        spawn_local(async move {
          JsFuture::from(Promise::resolve(&JsValue::UNDEFINED))
            .await
            .unwrap();
          callback();
        });
      }))
      .build("Click me")
  }
}

I get this error:

error[E0507]: cannot move out of `callback`, a captured variable in an `FnMut` closure
  --> examples/01-hello-world/src/lib.rs:60:21
   |
53 |       let mut callback = self.callback.clone();
   |           ------------ captured outer variable
54 |       h!(button)
55 |         .on_click(&Callback::new(move |_| {
   |                                  -------- captured by this `FnMut` closure
...
60 |           spawn_local(async move {
   |  _____________________^
61 | |           JsFuture::from(Promise::resolve(&JsValue::UNDEFINED))
62 | |             .await
63 | |             .unwrap();
64 | |           callback();
   | |           --------
   | |           |
   | |           variable moved due to use in coroutine
   | |           move occurs because `callback` has type `T`, which does not implement the `Copy` trait
65 | |         });
   | |_________^ `callback` is moved here

How to change the code to achieve the desired result without Rust errors?

[yishn]

This follows from Rust's ownership rules. Initially, callback is owned by

  fn render(&self) -> VNode {

Then, it moves to a FnMut:

      .on_click(&Callback::new(move |_| {

Finally, you try to move it to:

        spawn_local(async move {

However, this last move is illegal, since the FnMut still needs to hold onto callback since it can be potentially called again. If Callback::new() received an FnOnce, this move would be legal. A solution would be to clone callback before moving:

  fn render(&self) -> VNode {
    let mut callback = self.callback.clone();

    h!(button)
      .on_click(&Callback::new(move |_| {
        spawn_local({
          let mut callback = callback.clone();

          async move {
            JsFuture::from(Promise::resolve(&JsValue::UNDEFINED))
              .await
              .unwrap();
            callback();
          }
        );
      }))
      .build("Click me")
  }