How to update state after a JavaScript Promise resolves in use_effect?

[ChocolateLoverRaj]

This is my code so far:

use js_sys::{Object, Reflect};
use wasm_bindgen::closure::Closure;
use wasm_bindgen_futures::{self, JsFuture};
use wasm_react::{
    h,
    hooks::{use_effect, use_state, Deps},
    Component, VNode,
};
use web_sys::{console::log_1, window, MediaStreamConstraints};

pub struct CanCamera;

impl Component for CanCamera {
    fn render(&self) -> VNode {
        let resolved = use_state(|| false);
        use_effect(
            {
                let video_object = Object::new();
                Reflect::set(&video_object, &"facingMode".into(), &"user".into()).unwrap();
                let js_promise = window()
                    .unwrap()
                    .navigator()
                    .media_devices()
                    .unwrap()
                    .get_user_media_with_constraints(
                        &MediaStreamConstraints::new().video(&video_object),
                    )
                    .unwrap();
                move || || ()
            },
            Deps::none(),
        );
        h!(h1).build("can camera")
    }
}

How to change the state after js_promise is resolved or rejected?

[ChocolateLoverRaj]

I figured out how to run resolve / reject callbacks, but they cannot change the state in the way I did it here:

use js_sys::{Object, Reflect};
use std::{future::Future, thread};
use wasm_bindgen::{closure::Closure, convert::IntoWasmAbi, JsValue};
use wasm_bindgen_futures::{self, JsFuture};
use wasm_react::{
    h,
    hooks::{use_effect, use_state, Deps},
    Component, VNode,
};
use web_sys::{console::log_1, window, MediaStreamConstraints};

pub struct CanCamera {
    closure_resolved: Closure<dyn FnMut(JsValue)>,
    closure_rejected: Closure<dyn FnMut(JsValue)>,
}

impl CanCamera {
    pub fn new() -> CanCamera {
        CanCamera {
            closure_resolved: Closure::new(|v| {
                log_1(&"resolved".into());
            }),
            closure_rejected: Closure::new(|v| {
                log_1(&"rejected".into());
            }),
        }
    }
}

impl Component for CanCamera {
    fn render(&self) -> VNode {
        let resolved = use_state(|| false);
        use_effect(
            {
                let video_object = Object::new();
                Reflect::set(&video_object, &"facingMode".into(), &"user".into()).unwrap();
                let js_promise = window()
                    .unwrap()
                    .navigator()
                    .media_devices()
                    .unwrap()
                    .get_user_media_with_constraints(
                        &MediaStreamConstraints::new().video(&video_object),
                    )
                    .unwrap();
                drop(js_promise.then2(&self.closure_resolved, &self.closure_rejected));
                move || || ()
            },
            Deps::none(),
        );
        h!(h1).build("can camera")
    }
}

[ChocolateLoverRaj]

I figured out how to do it:

use js_sys::{Object, Reflect};
use wasm_bindgen::{closure::Closure, JsValue};
use wasm_react::{
    h,
    hooks::{use_effect, use_ref, use_state, Deps},
    Component, VNode,
};
use web_sys::{console::log_1, window, MediaStreamConstraints};

pub struct CanCamera {}

impl CanCamera {
    pub fn new() -> CanCamera {
        CanCamera {}
    }
}

struct Magic {
    closure_resolved: Closure<dyn FnMut(JsValue)>,
    closure_rejected: Closure<dyn FnMut(JsValue)>,
}

impl Component for CanCamera {
    fn render(&self) -> VNode {
        let resolved = use_state(|| false);
        let magic_ref = use_ref({
            let mut resolved_0 = resolved.clone();
            let mut resolved_1 = resolved.clone();
            Magic {
                closure_resolved: Closure::new(move |v| {
                    resolved_0.set(|mut _resolved| true);
                    log_1(&"resolved".into());
                    log_1(&v);
                }),
                closure_rejected: Closure::new(move |v| {
                    resolved_1.set(|mut _resolved| true);
                    log_1(&"rejected".into());
                }),
            }
        });
        use_effect(
            {
                log_1(&"effect".into());
                let video_object = Object::new();
                Reflect::set(&video_object, &"facingMode".into(), &"user".into()).unwrap();
                let js_promise = window()
                    .unwrap()
                    .navigator()
                    .media_devices()
                    .unwrap()
                    .get_user_media_with_constraints(
                        &MediaStreamConstraints::new().video(&video_object),
                    )
                    .unwrap();
                drop(js_promise.then2(
                    &magic_ref.current().closure_resolved,
                    &magic_ref.current().closure_rejected,
                ));
                move || || ()
            },
            Deps::none(),
        );
        let resolved = resolved.value().to_owned();
        if resolved {
            log_1(&"rendering after promise resolved".into());
        }
        h!(h1).build(match resolved {
            true => "Got",
            false => "Getting camera",
        })
    }
}

[yishn]

You're not using use_effect correctly, please take a look at the documentation or in the other discussion.

[yishn]

For Promise-handling, you can consider using a crate such as wasm-bindgen-futures to transform promises into futures.

[ChocolateLoverRaj]

@yishn I tried using JsFuture::from(js_promise) but I didn't have a way of running the future. After looking at the link you sent I found a useful function spawn_local which I used in a way that works:

use js_sys::{Object, Reflect};
use wasm_bindgen::JsValue;
use wasm_bindgen_futures::{spawn_local, JsFuture};
use wasm_react::{
    clones, h,
    hooks::{use_effect, use_state, Deps},
    Component, VNode,
};
use web_sys::{console::log_1, window, MediaStreamConstraints};

pub struct CanCamera {}

impl CanCamera {
    pub fn new() -> CanCamera {
        CanCamera {}
    }
}

pub enum PromiseState {
    NotStarted,
    Pending,
    Done(Result<JsValue, JsValue>),
}

impl Component for CanCamera {
    fn render(&self) -> VNode {
        let resolved = use_state(|| PromiseState::NotStarted);
        {
            clones!(mut resolved);
            use_effect(
                move || {
                    resolved.set(|mut _resolved| PromiseState::Pending);
                    let video_object = Object::new();
                    Reflect::set(&video_object, &"facingMode".into(), &"user".into()).unwrap();
                    let js_promise = window()
                        .unwrap()
                        .navigator()
                        .media_devices()
                        .unwrap()
                        .get_user_media_with_constraints(
                            &MediaStreamConstraints::new().video(&video_object),
                        )
                        .unwrap();
                    spawn_local(async move {
                        let result = JsFuture::from(js_promise).await;
                        match result {
                            Ok(ref v) => log_1(&v),
                            Err(ref v) => log_1(&v),
                        }
                        resolved.set(|_resolved| PromiseState::Done(result));
                    });
                },
                Deps::none(),
            );
        }
        let text = match *resolved.value() {
            PromiseState::NotStarted => "Will get camera",
            PromiseState::Pending => "Getting camera",
            PromiseState::Done(_) => "Got",
        };
        h!(h1).build(text)
    }
}

Would this code cause problems? What if the promise is resolved after the component is unmounted and

resolved.set(|_resolved| PromiseState::Done(result));

is called after the component is unmounted?

[yishn]

This looks like it's fine (provided the compiler doesn't complain first 😄).

resolved.set(|_resolved| PromiseState::Done(result));

In the scenario when the component is unmounted between promise creation and promise resolution it will be called, yes. But this is the equivalent to this piece of JS:

useEffect(() => {
  const promise = ...;
  promise.then(result => setResolved(PromiseState.Done(result)));
});

Here, it also might happen that the component unmounts between promise creation and promise resolution, but I think React will simply ignore it when this happens.

As for wasm-react itself, no undefined behavior should occur in this edge case.