ShouldComponentUpdate-like behavior for store

[ciaoben]

I was wondering if there is a way to obtain a "componentShouldUpdate"-like behavior for store edits.
From what I understand if I set a value on the store the render is trigger even if the new value is the same as the old value, is there a way to avoid it?

// current store situation store = {test: 2}
store.test = 2 // -> will trigger re-render

[solkimicreb]

From what I understand if I set a value on the store the render is trigger even if the new value is the same as the old value, is there a way to avoid it?

It won't re-render if the value did not change with a strict equality check (===). See this minimal repro (just spam the reset button a few times).

You can also use raw() from the underlying @nx-js/observer-util package to update/read the store without the added reactivity but we don't promote that a lot because it is a low-level API.

import { raw } from '@nx-js/observer-util';

// this re-renders everything that uses `myStore.prop`
myStore.prop = 12

// this does not re-render anything
raw(myStore).prop = 12

You also have the option to use shouldComponentUpdate or memo in your component and do complex store comparisons there.

And we may add some low-level hooks in the future to handle this use-case. We will add a couple of low-level hooks for stores in the very next release which can intercept default language and reactivity behavior. I will think about adding a hook for this too. These will be part of the public and documented API but they will be mainly intended for library authors and for devs how would like to build custom solutions on top of easy-state.

[ciaoben]

Great! Thanks for the explanation! It is really a great library. We use it on a big application and the only problem it is to understand what changes triggered the re-render of a specific component.
I am looking forward for the next release to be able to hook on a console.log debugger to better debug re-renders!

Thanks for the great work!