subscribeWithSelector triggers on every store update, even if there is no change

[ivancuric]

Let's say I have the following store:

const store  = createStore()(subscribeWithSelector(() => {a: 1}))

and the following two subscriptions:

    store.subscribe(
      (x) => x.a,
      (a) => console.log(a),
    );

    store.subscribe((x) => console.log(x));

Updating the store with the same value using store.setState({a: 1}) will not trigger the first subscription, as expected, but it will trigger the second one.

Is this an expected behaviour?

[dai-shi]

If you use subscribeWithSelector middleware, the first argument is a selector, not a callback.
Yes, it's an expected behavior.

[ivancuric]

Thanks for the fast response!

According to the TS types, this form is still valid:

store.subscribe((current, previous) => console.log(current))

and works the same as this one:

store.subscribe(
   (store) => store,
   (current, previous) => console.log(current),
 );

But let's work with the second option — selecting the entire store.

I'm not sure why selecting the entire store triggers an event when a non-changing update was made, while selecting a property doesn't, that is:

store.subscribe(
   (store) => store.a,
   (current, previous) => console.log(current),
 );

// doesn't trigger
store.setState({a: store.getState().a})

[dai-shi]

According to the TS types, this form is still valid:

store.subscribe((current, previous) => console.log(current))

Sorry, that was my bad.

zustand/src/middleware/subscribeWithSelector.ts

Line 30 in 73ffa4b

(listener: (selectedState: T, previousSelectedState: T) => void): () => void

Yes, that form is supported.

and works the same as this one:

store.subscribe(
   (store) => store,
   (current, previous) => console.log(current),
 );

But let's work with the second option — selecting the entire store.

I'm not sure why selecting the entire store triggers an event when a non-changing update was made, while selecting a property doesn't, that is:

store.subscribe(
   (store) => store.a,
   (current, previous) => console.log(current),
 );

// doesn't trigger
store.setState({a: store.getState().a})

Because you are passing the new state object.
I think this doesn't trigger in either case:

store.setState(store.getState())

Is this an expected behaviour?

So, yes, it's because the state object is different (not because of the function call form.)

[ivancuric]

I think I get it.

You're right, this doesn't trigger it:

store.setState(store.getState())

while the following does - it's a new object:

store.setState({ ...store.getState() });

So to have it not trigger, would I have to use a shallow comparison function when subscribing?

[dai-shi]

So to have it not trigger, would I have to use a shallow comparison function when subscribing?

It depends on your goal.
I think triggering a callback (that does nothing based on a condition) can be more lightweight than a shallow comparison.
(but, in general, we need to "measure" to discuss performance. all I'm saying is hypothetical or intuitive.)