Declarative direct manipulation in react with AQUEDUX

Re-rendering components is a very handy pattern whenever you need to display form data, or values returned from the backend. However sometimes that’s not enough for your application. You’d like your application to quickly react to scroll events, maybe mouse movement, timers, or any other source that emits events once at frame.

Unfortunately re-rendering pattern updating component props / state will not work here. Cause even just shallow comparison / jsx generation on each frame may outcome with noticeable overhead, that will not allow your app to perform smoothly.

To improve the performance, you need to manipulate your dom elements directly. Usually that’s done by taking a ref of your element, and updating it explicitly:

This approach has several disadvantages:

• you need to explicitly subscribe / unsubscribe .
• your code is no longer declarative, instead you need to imperatively update each prop you need to.
• in general it’s harder to keep separation between the why and what should be executed.

To update elements dynamically, and maintain the code elegance you can use AQUEDUX. This library allows you to pass observable properties to your components. In case the passed property is an observable value, it will not just update the component, but will also subscribe internally. Whenever observable property will emit a new value, a direct manipulation of dom element will be performed.

In case you’ve worked with react-native, this is very similar to how Animated api works. You’re not enforced to use rxjs with this library, it’s enough that your observable property has subscribe method which will return an object with unsubscribe method.

P.S.: Try to play with it on this codesandbox.