Subscribe & hooks not reacting when the slice is an array

I have a state which is basically:

type State = {
  items: {
    a: string,
    b: number
  }[]
}

Pushing another item to the items array, or mutating the a or b props of an item won’t trigger an update if subscribed to only the items slice, like:

useStore.subscribe(console.log  x => x.items);

or

const items= useStore(x => x.items);

useEffect(() => {
  console.log(items);
}, [items]);

Subscribing to the entire store (eg const state = useStore() )works fine, but I’d like to only monitor this slice of state.

I’m using Immer middleware to update state, and an example action that adds an item is:

addItem: (item) => set((draft) => void draft.items.unshift(item);

[ivancuric]

I am an idiot who forgot to put in immer in the actual producer. 🤦‍♂️

[ivancuric]

That’s an antipattern in Immer. You can’t both mutate the state and return a new one. What I can do is use draft.items = [...draft.items] after every update which is kinda missing the point since I’d have to do it in every action.

I’m not sure why Zustand detects the entire store update.