Using Zustand store as a function (store(fn)) causes Maximum update depth exceeded

[see7788]

Bug Description

export interface Store_t {
error: Array<{ data: string, time: Date }>;
remote: electron1_api_t;
tables: { [k in keyof Tables_t]: Array<Tables_t[k]> };
css: {
ml: { listindex: number }
}
filter: Tables_filter_t;
itemTpl: Tables_t;
tablesCount: Array<[keyof Tables_t, number]>
tablesCountSet(): void;
}
const webStore = create<Store_t>()(
subscribeWithSelector(
immer(
(set, get) => {
return {
remote: callObjProxy<electron1_api_t>(async (...c) => console.log("def", ...c)) as Store_t["remote"],
tables: Object.fromEntries(tablenameTuple.map(v => [v, []])) as any,// satisfies { [T in keyof Tables_t]: Array<Tables_t[T]> },
filter: Object.fromEntries(tablenameTuple.map(v => [v, Tables_filter[v]])) as any,
itemTpl: Tables_itemTpl,
error: [] as Store_t["error"],
tablesCount: tablenameTuple.map(k => [k, 0]),
tablesCountSet: () => set(s => {
const entries = Object.entries(s.tables)
s.tablesCount = entries.map(([k, data]) => [k, data.length] as [keyof Tables_t, number])
}),
css: {
ml: { listindex: 0 }
}
}
}
)
)
)

export function useFilterDbs_ml(): Tables_filterDbs_t["ml"] {
const alldbs = webStore(s => s.tables["ml"])
const filter = webStore(s => s.filter["ml"])
const pro = webStore(s => s.tables.pro)
const sku = webStore(s => s.tables.sku)
const money = webStore(s => s.tables.money)
return useMemo(() => {
const e = everyFilter(filter)
const proby = countBy(pro, idg_ml)
const skuby = countBy(sku, idshop_ml)
const moneyby = countBy(money, id_ml)
const data = alldbs.map(v => ({ ...v, pro: proby[v.id], sku: skuby[v.id], money: moneyby[v.id] }))
return data.filter(e);
}, [filter, alldbs, pro, sku, money,])
}

export function testMemo({ tables, filter: f }: Store_t) {
const { ml: alldbs, pro, sku, money } = tables
const filter = f.ml
const e = everyFilter(filter)
const proby = countBy(pro, idg_ml)
const skuby = countBy(sku, idshop_ml)
const moneyby = countBy(money, id_ml)
const data = alldbs.map(v => ({ ...v, pro: proby[v.id], sku: skuby[v.id], money: moneyby[v.id] }))
return data.filter(e);

}

const dbs = useFilterDbs()//✅ works perfectly

// const dbs = webStore(testMemo)//❌ causes "Maximum update depth exceeded"
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
at getRootForUpdatedFiber (chunk-SYXIFXFW.js?v=3f5226de:3001:128)
at enqueueConcurrentHookUpdate (chunk-SYXIFXFW.js?v=3f5226de:2985:16)
at dispatchSetStateInternal (chunk-SYXIFXFW.js?v=3f5226de:5350:20)
at dispatchSetState (chunk-SYXIFXFW.js?v=3f5226de:5321:9)
at Object.current (chunk-HKIEB4IQ.js?v=3f5226de:23028:9)
at chunk-HKIEB4IQ.js?v=3f5226de:4597:114
at imperativeHandleEffect (chunk-SYXIFXFW.js?v=3f5226de:4992:28)
at react-stack-bottom-frame (chunk-SYXIFXFW.js?v=3f5226de:17478:20)
at runWithFiberInDEV (chunk-SYXIFXFW.js?v=3f5226de:1485:72)
at commitHookEffectListMount (chunk-SYXIFXFW.js?v=3f5226de:8460:122)

Reproduction Link

https://zustand-maximum-update-depth-bug.stackblitz.io

[dbritto-dev]

@see7788 the link doesn't work