How to handle rapid events?

[cargillchantry]

My use case is a kind of drag and drop API.

I was thinking onmousedown attaches both an onmouseup and onmousemove event, which simply updated the x and y coordinates of an SVG.

I can easily achieve this using the ShouldRender return type, but am I right to assume this would mean the node would be destroyed and recreated for each invocation of the events? It would be nice if there was some way to directly mutate the DOM. Is this possible with yew?

I guess this goes outside the normal use case for the lifecycle hooks. Could I just use raw webassembly code within the component update method?

[siku2]

am I right to assume this would mean the node would be destroyed and recreated for each invocation of the events?

No, Yew uses a virtual DOM approach and, where possible, only updates the existing elements with the required changes.
In your case, when a coordinate changes, Yew basically calls element.setAttribute("x", new_x_value).
This doesn't mean that you won't run into performance problems though, but you can check out the Boids example which continuously changes the position and colour of a few hundred <polygon> elements (almost) without breaking a sweat.

If you do run into performance problems at some point, you can escape from Yew's declarative world and make use of web-sys to access and manipulate the underlying elements (web-sys is a low level crate containing bindings for most of the js APIs).
Take a look at the node_refs examples which makes direct calls to DOM elements to focus them.

[cargillchantry]

Thanks @siku2 . That's really helpful!

I suppose these sort of details will eventually appear in the how it works section of the docs.

I don't anticipate running into any performance issues (otherwise I probably wouldn't be using WASM at all in early 2021), but figured I'd check my understanding.