Mapping an array in useStore causes an infinite loop. I want to confirm if this is a bug.

[boiboif]

const filterData = useTestStore(
    useShallow((state) =>
      state.data
        // The following line of code causes an infinite loop:
        // .map((item) => ({ ...item, name: 'name: ' }))
        .filter((item) => item.status === 1)
    )
  );

// store.ts
import { create } from 'zustand';

type State = {
  data: { name: string; status: 0 | 1 }[];
};
type Action = {
  setData: (newData: State['data']) => void;
};
type Store = State & Action;

const initState: State = {
  data: [{ name: 'jack', status: 1 }],
};

export const useTestStore = create<Store>()((set) => ({
  ...initState,
  setData: (newData) => {
    set({
      data: newData,
    });
  },
}));

Repository to reproduce the issue:
https://stackblitz.com/edit/vitejs-vite-8cvrr3?file=src%2Ftest%2Findex.tsx

[dai-shi]

thanks for reporting. i'll have a look.

[dai-shi]

        // The following line of code causes an infinite loop:
        // .map((item) => ({ ...item, name: 'name: ' }))

Ah, like you said, it causes infinite loops because it creates new objects for array items.
shallow is to compare items in 1-level deep. You would need deep-equal in this case.

I would do something like this: https://stackblitz.com/edit/vitejs-vite-bk6wf8?file=src%2Ftest%2Findex.tsx

[boiboif]

Thank you for your answer.