Setter function causing rerender of all page

[haveprogrskillissues]

Hello! I have some problem with rendering. When trying to call a function for update store data, all components using this store are re-rendered, as a result of which even input lags occur in the forms for entering data. What could be causing this problem? In the project, for convenience, I wrote my own functions for creating a store and setters for managing fields in the store, the code for which I will add below.

Slice of Modal component where i'm enter data:

function TabPanelMainData() {
  const name = useGuestsPageStore((state) => state.newRegularGuestModal.name);
  const surname = useGuestsPageStore(
    (state) => state.newRegularGuestModal.surname
  );
  const birthDate = useGuestsPageStore(
    (state) => state.newRegularGuestModal.birthDate
  );
  const cardNumber = useGuestsPageStore(
    (state) => state.newRegularGuestModal.cardNumber
  );
  const notes = useGuestsPageStore((state) => state.newRegularGuestModal.notes);
  const setData = useGuestsPageStore(
    (state) => state.newRegularGuestModal.setData
  );

  return (
    <TabPanel value={0}>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "26px 1fr 1fr",
          alignItems: "center",
          gap: 1,
        }}
      >
        <BadgeRoundedIcon fontSize="xl" />
        <Typography level="title-sm">Name*</Typography>
        <Input
          value={name}
          onChange={(e) => {
            setData((prev) => {
              return { ...prev, name: e.target.value };
            });
          }}
          required
          size="sm"
        />
        <BadgeRoundedIcon fontSize="xl" />
        <Typography level="title-sm">Surname*</Typography>
        <Input
          value={surname}
          onChange={(e) =>
            setData((prev) => {
              return { ...prev, surname: e.target.value };
            })
          }
          required
          size="sm"
        />
        <CakeRoundedIcon fontSize="xl" />
        <Typography level="title-sm">Birth Date*</Typography>
        <Input
          value={birthDate}
          onChange={(e) =>
            setData((prev) => {
              return { ...prev, birthDate: e.target.value };
            })
          }
          type="date"
          size="sm"
          placeholder="DD.ММ.YYYY"
          required
          slotProps={{
            input: { min: "1900-01-01" },
          }}
        />
        <CropFreeRoundedIcon fontSize="xl" />
        <Typography level="title-sm">Card Barcode*</Typography>
        <Input
          value={cardNumber}
          onChange={(e) =>
            setData((prev) => {
              return { ...prev, cardNumber: e.target.value };
            })
          }
          size="sm"
        />
        <NotesRoundedIcon fontSize="xl" />
        <Typography level="title-sm">Notes</Typography>
        <Input
          value={notes}
          onChange={(e) =>
            setData((prev) => {
              return { ...prev, notes: e.target.value };
            })
          }
          size="sm"
        />
      </Box>
    </TabPanel>
  );
}

Zustand Store:

import { create } from "zustand";
import { devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
import { setAutoFreeze } from "immer";
import { guestsData } from "../../data";
import { createStore, ZustandSetter } from "../../utils";

setAutoFreeze(false);

const newRegularGuestModal = (set) => ({
  open: false,
  name: "",
  surname: "",
  birthDate: "",
  cardNumber: "",
  notes: "",
  phone: "",
  email: "",
  socials: "",
  sales: null,
  countPoints: false,
  guestType: "regular",
  setOpen: new ZustandSetter(set, "newRegularGuestModal", "open"),
  setData: new ZustandSetter(set, "newRegularGuestModal"),
});

const table = (set) => ({
  tableData: [...guestsData],
  rowSelection: {},
  globalFilter: "",
  sorting: [],
  columnFilters: [
    {
      id: "pricing",
      value: "",
    },
    {
      id: "guestType",
      value: "",
    },
  ],
  selectedRows: [],
  setTableData: new ZustandSetter(set, "table", "tableData"),
  setRowSelection: new ZustandSetter(set, "table", "rowSelection"),
  setGlobalFilter: new ZustandSetter(set, "table", "globalFilter"),
  setSorting: new ZustandSetter(set, "table", "sorting"),
  setColumnFilters: new ZustandSetter(set, "table", "columnFilters"),
  setSelectedRows: new ZustandSetter(set, "table", "selectedRows"),
});

const selectedGuestsModal = (set) => ({
  open: false,
  paymentType: "",
  paymentPrefer: "",
  setOpen: new ZustandSetter(set, "selectedGuestsModal", "open"),
  setPaymentType: new ZustandSetter(set, "selectedGuestsModal", "paymentType"),
  setPaymentPrefer: new ZustandSetter(
    set,
    "selectedGuestsModal",
    "paymentPrefer"
  ),
});

const store = immer((...args) => ({
  newRegularGuestModal: { ...newRegularGuestModal(...args) },
  table: { ...table(...args) },
  selectedGuestsModal: { ...selectedGuestsModal(...args) },
}));

const useGuestsPageStore = createStore(store, { create, devtools });
console.log(useGuestsPageStore.getState());

export default useGuestsPageStore;

Page With Components:

export default function GuestsPage() {
  const setOpenNewRegularGuestModal = useGuestsPageStore(
    (state) => state.newRegularGuestModal.setOpen
  );

  return (
    <CssVarsProvider disableTransitionOnChange>
      <CssBaseline />
      <Box
        component="main"
        className="MainContent"
        sx={{
          px: { xs: 2, lg: 6 },
          pt: {
            xs: "calc(12px + var(--Header-height))",
            lg: 3,
          },
          pb: { xs: 2, lg: 3 },
          flex: 1,
          display: "flex",
          flexDirection: "column",
          minWidth: 0,
          height: "100dvh",
          gap: 1,
        }}
      >
        <Box
          sx={{
            display: "flex",
            gap: 1,
            flexWrap: "wrap",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <PageHeader />
          <Box sx={{ display: "flex", gap: 1 }}>
            <Dropdown>
              <MenuButton
                slots={{ root: IconButton }}
                slotProps={{
                  root: { variant: "outlined", color: "neutral", size: "sm" },
                }}
              >
                <MoreHorizRoundedIcon />
              </MenuButton>
              <Menu size="sm" sx={{ minWidth: 140, zIndex: 10001 }}>
                <MenuItem>Add new guest</MenuItem>
                <MenuItem onClick={() => setOpenNewRegularGuestModal(true)}>
                  Add new regular guest
                </MenuItem>
                <MenuItem>Regular guests</MenuItem>
              </Menu>
            </Dropdown>
          </Box>
        </Box>
        <Box
          className="SearchAndFilters-tabletUp"
          sx={{
            borderRadius: "sm",
            paddingBottom: 2,
            display: { xs: "none", sm: "flex" },
            flexWrap: "wrap",
            gap: 1.5,
            alignItems: "flex-end",
          }}
        >
          <GuestsTablePanel />
        </Box>
        <GuestsTable />
      </Box>
      <NewRegularGuestModal />
      <SelectedGuestsModal />
    </CssVarsProvider>
  );
}

My function for creating store:

export function createStore(store, options = {}) {
  const { create, devtools, persist, persistOptions } = options;

  let persistStore = persist ? persist(store, { ...persistOptions }) : null;
  // eslint-disable-next-line no-undef
  let devtoolsStore = !process.env.NODE_ENV || (process.env.NODE_ENV === "development" && devtools)
      ? devtools(store)
      : null;
  let persistWithDevtoolsStore = persist && devtools ? devtools(persist(store, { ...persistOptions })) : null;

  return create(persistWithDevtoolsStore 
                ? persistWithDevtoolsStore : devtoolsStore 
                ? devtoolsStore : persistStore 
                ? persistStore : store)
}

Setter generator for store:

export class ZustandSetter {
  constructor(set, ...keys) {
    return (fn) => {
      set((state) => {
        const target = keys.slice(0, -1).reduce((obj, key) => obj[key], state);
        const lastKey = keys[keys.length - 1];
        target[lastKey] = typeof fn === "function" ? fn(target[lastKey]) : fn;
      });
    };
  }
}

Metrics from React Profiler:

I appreciate every response and reaction to this discussion. Thank you 🙏🙏🙏

[haveprogrskillissues]

Sorry, i'm not using in array pick's useShallow. Remove please this discussion, I'm ashamed 😅