Best Practices
There are a few things to keep in mind to use diox with maximum e
Use pure functions
Although you can directly modify the state
variable within mutations, it is not the recommended approach, as it can lead to inconsistencies and undesired side effects, and break the reactivity mechanism (i.e. your subsciptions won't be triggered when state changes).
Indeed, as most of the frontend frameworks out there, diox
performs a shallow comparison in order to determine whether a mutation should trigger all subscriptions or not.
Here is an example that illustrates this mechanism.
This is a very simple example, but most of the time, you will get a state containing nested objects and arrays, and making sure you always return deep state clones can become cumbersome. There are many libraries available to make your life easier and keep your functions pure, such as basx, ImmerJS, or ImmutableJS.
Combine modules to optimize your components
Calling useSubscription
several times in the same component is perfectly fine. However, keep in mind that each subscription will trigger a new rendering. While this is not an issue when having two or three subscriptions, it can eventually affect your app's performance if you useSubscription
, say, ten times from within the same component. A more elegant way to combine your modules and useSubscription
only once. Here is an example.
The previous code should be refactored like this:
Last updated