.push when using immer as middleware does not cause a re-render

Hello,

Using immer as a middleware for zustand works great, however when using .push to add an item to an array a re-render does not take place.

Example:

setState(state => {
  state.items.push(item);
});

The above does not work.

This does (i.e. triggers a re-render).

setState(state => {
  state.items = [...state.items, item];
});

Any ideas?

Ps: .push is immer’s the recommended way of adding to an array .

[dai-shi]

Good point. It somewhat accidentally works.

set((state) => {
  state.items = [...state.items, Date.now()];
  return undefined;
})

It’s returning undefined, so state = Object.assign({}, state, undefined) will create a new state object which triggers re-render. It’s not recommended as it’s mutating old state, which might cause issues with concurrent rendering in the future.

[dai-shi]

Closing as resolved.