valtio should avoid state change for compare equal value

[wenerme]

new to valtio, I expected mutate state is like immer with proxy, if assign the same value, the state should not change, but seems not the case.

like

const state = proxy({
  ref: ref(0),
  object: {}
});

// should prevent the rerender if the value is reference equal
state.ref = ref(0)

// should avoid change
state.object = {}

Is it possible to pass the custom comparator or use with immer to prevent the change ?

[dai-shi]

It should skip setting if it's the same as the previous one. (Compared with Object.is by default.)

For example, this should work as expected.

const state = proxy({ obj: {} })
state.obj = state.obj

But, this doesn't,

state.obj = {}

because it's a new object. This should be the default behavior that we shouldn't change.

[dai-shi]

state.ref = ref(0)

I don't feel like writing like this, but it should just mean state.ref = 0, which skips changes, no?

[wenerme]

Thanks, I expected immer like mutation detect, seems I was wrong, but do hope valtio support custom change compare, valtio already batched mutation.

state.ref = ref(0)

Just use 0 as a reference, due to #510 , the 0 stand for <Comp/> or document.body like value, should use Object.is compare the ref value changed or not to avoid the notify.

[dai-shi]

I expect it work fine with document.body.

state.ref = ref(document.body)
state.ref = ref(document.body) // should be no-op

[dai-shi]

btw, we could create a proxy object in advance.

const obj = proxy({ foo: 1 }) // initialize object outside
const state = proxy({ obj })
state.obj = obj // should be no-op

[dai-shi]

I expected immer like mutation detect, seems I was wrong

As I wrote in a different issue/discussion, valtio is designed like an opposite of immer.

but do hope valtio support custom change compare, valtio already batched mutation.

We do want to avoid adding features in valtio. It's one of the ground rules from the start.
If you need a custom comparator, it should be nice if we can make it possible to it on your end. There's an experimental feature called unstable_getHandler, with which you can specify a function instead of Object.is.

valtio/src/vanilla.ts

Line 155 in 7c85c14

is: Object.is,

But this feature is not very developer friendly. It's basically for 3rd-party library developers. It means you should be able to create proxyWithCustomComparator util.

[wenerme]

Thanks, I will look into it.

[wenerme]

Wow, after

import eq from "react-fast-compare";
unstable_getHandler(state).is = eq

valtio works like expected, thanks.

https://codesandbox.io/s/valtio-render-test-lzqhf7

Can close the issue now.

[dai-shi]

@wenerme When #528 lands, your solution will no longer work, but it will expose a new powerful function, with which you can customize is.

[wenerme]

@dai-shi thanks, will watch the release