Creating a State Manager for React with Rust and WebAssembly

[giscus[bot]]

Creating a State Manager for React with Rust and WebAssembly

Discover the Rust-DD framework, enabling the application of domain-driven design (DDD) principles in Rust. Write efficient, safe, and clean code with this modern development tool.

https://rust-dd.com/post/creating-a-state-manager-for-react-with-rust-and-webassembly

[neurosoup]

Thanks for this POC, I come from React and I would like to introduce rust in my front-end app. You say that you have serialization/deserialization overhead but is using HashMap leads to the best performance ? I'm still studying rust and I was wondering if using signals would improve performance somehow ?

[dancixx]

@neurosoup In the example, I used the ahash crate because, based on my research, it is one of the best-performing HashMap implementations in Rust. It’s not cryptographically secure, which allows it to perform faster than the standard std::collections::HashMap. When working with Rust crates in web development, especially in scenarios involving WebAssembly (Wasm), having Wasm support is essential.

The goal of this proof-of-concept example was to create something akin to Zustand, storing data in a JavaScript-like object. This is why I opted for a HashMap. While this approach works for atomic values from the JavaScript side, it inevitably requires wasm-bindgen for integrating the Wasm module into a React application. Since JavaScript objects are not directly compatible with Rust data structures, serialization and deserialization methods are necessary (serde-wasm-bindgen), which introduce additional overhead.

Although I'm not an expert in Wasm, there are likely alternative solutions to optimize the example further. However, I’d personally avoid using a state manager like this for React apps, especially if it relies heavily on Wasm modules. There are Rust-based web frameworks such as Leptos, Dioxus, or the React-like Yew that address the JS-Wasm communication overhead by being compiled directly into Wasm. This avoids the need for JavaScript objects entirely.

For React applications, leveraging a Wasm module makes the most sense when you need to implement performance-critical business logic on the client side. I hope this explanation provides some clarity.