The result of getSnapshot should be cached to avoid an infinite loop

[jcuenod]

I'm new to zustand. I've got my basic functionality working, but I'm seeing this warning coming from react-dom in the console:

Warning: The result of getSnapshot should be cached to avoid an infinite loop

The stack trace is not very helpful, but I'm not directly using getSnapshot anywhere, so I assume this is a zustand bug. I guess that it has been introduced by react/react#24508.

Is this a zustand bug or should I be scrutinizing my own code more?

[dai-shi]

Are you creating a fresh store in render function?

[jcuenod]

I have a store.ts file with:

export const useMyStore = create<MyState>((set) => ({

In a component file I import useMyStore and use it inside the render function:

const MyReactComponent = (props) => {
  const store = useMyStore((state) => ...

Is that not the correct pattern?

[dai-shi]

It looks good. Can you reproduce your issue with https://codesandbox.io/s/react-new ?

[jcuenod]

Thank you, I figured it out. The problem was that I was using useX callbacks to get around some eslint errors about the use of useX hooks outside react components. The actual solution was:

const myState = useMyStore.getState()

[shub1233]

my suggestion would be to use "useShallow" Docs

const [blah] = useMyStore(useShallow((state) => [state.blah]));

[chaos-MK]

thank you ma man, that helped me a lot, even with using AI I didn't figure out the problem

[ashuvssut]

The docs link is invalid. Here's the updated one: https://zustand.docs.pmnd.rs/reference/hooks/use-shallow

i did use useShallow as shown below, and i am still get the errors

import { useShallow } from 'zustand/react/shallow'
import { Keyboard } from 'react-native'

// inside the component ....

const gotoNextStep = useOnboarding(
	useShallow(
		(s) =>
			function gotoNextStepWithKeyboardDismiss() {
				Keyboard.dismiss()
				return s.gotoNextStep()
			}
	)
)

Here's the errors:

 ERROR  The result of getSnapshot should be cached to avoid an infinite loop
 ERROR  [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.]

Here's what works for me instead

	const gotoNextStepFn = useOnboarding((s) => s.gotoNextStep)
	const gotoNextStep = () => {
   	Keyboard.dismiss()
   	gotoNextStepFn()
   }

I use react 19.2. so that's why i didnt wrap gotoNextStep with useCallback -- and it works this way

I use zustand v5.0.12

I would have created the stackblitz for this, but i am on a tight deadline. i will create it when i get the time

[tylim88]

my case is
useStoreX(({ a, b }) => ({ a, b })) triggers infinite rerender error
useStoreX(state=>state) and useStoreX() are fine
weird

[eric-d-johnson]

Whoops, I see the reply below where you suggest this! 🤦‍♂️

[GauravJawalkar]

If you change it to useRolesStore((s) => s), does it avoid the error?

No, it still get the same error unless I use Zustand 4.5.4; then it works fine.

This what I use with version 4.5.4

  const { roles, error } = useRolesStore((state) => ({
    roles: state.roles,
    error: state.error,
  }));

Yepp worked in my case too

[DjonniStorm]

thanks, in my case this:

const { items, addItems } = useMyStore((state) => ({
        items: state.items,
        addItems: state.addItems,
}));

caused an infinite loop

and this did not:

const { items, addItems } = useMyStore();

[tyx2000]

the same error here when you follow the zustand doc, and if just useStore() without state => ({...}) in it, the infinite loop is gone, but why?

[dbritto-dev]

@tyx2000 if you are returning a new object or a new array or a new ref that is causing an infinite loop so you must use useShallow or shallow. We recommend to use granular selector instead.

[sFrady20]

I'm having a similar issue after upgrading from 4.5.2 to 5.0.0

In my case I was doing:

  const xMove = app((x) => x.mouse.x / x.window.width - 0.5);
  const yMove = app((x) => x.mouse.y / x.window.height - 0.5);

I was able to confirm app((x) => x.mouse.x); and app((x) => x.window.width); each worked separately. but not when i try to use them both in the same selector.

I tried useShallow and it didn't work. (still getting infinite loop error)

I implemented a workaround by separating the accessors into different hooks:

  const mouseX = app((x) => x.mouse.x);
  const mouseY = app((x) => x.mouse.y);
  const winWidth = app((x) => x.window.width);
  const winHeight = app((x) => x.window.height);
  ...
  (then the rest of the math later)

I feel like pulling each variable individually is an unintended restriction though, and I'd personally prefer not to have to decide whether to use useShallow everytime FWIW

[dai-shi]

I tried useShallow and it didn't work. (still getting infinite loop error)

That's sounds weird.

I'd personally prefer not to have to decide whether to use useShallow everytime

For that, we introduced createWithEqualityFn which you can customize the default equalityFn and you can specify shallow. It's already in v4.

[Noitham]

Similar case with useShallow here:

I had this selector:

  const { selectedTheme, setSelectedTheme } = useStore(state => ({
    selectedTheme: state.selectedTheme,
    setSelectedTheme: state.setSelectedTheme,
  }));

Worked fine on v4, but on v5 I need to use useShallow.

[dai-shi]

Please use useShallow. v4 behavior seemed nice but it's not optimized.

[ShafSpecs]

Would createWithEqualityFn with shallow also do the trick?

[dbritto-dev]

@ShafSpecs yes

[dnguyenfs]

I have same problem when upgrade to v5, v4 working greate

[dai-shi]

v4 seems working, but it just hides this error.
Can you create a minimal reproduction with https://stackblitz.com/ ?

[Jumzeey]

i have the same issue

this is my store

import { create } from 'zustand';

import {
  SellerInformation,
  VehicleInformation,
} from '@/types/Static/VehicleInformation';

// Define Zustand store type
type FormStore = {
  seller: SellerInformation;
  vehicle: VehicleInformation;
  setSeller: (seller: Partial<SellerInformation>) => void;
  setVehicle: (vehicle: Partial<VehicleInformation>) => void;
};

// Create Zustand store
export const useFormStore = create<FormStore>((set) => ({
  seller: {
    fullName: '',
    phone: '',
    email: '',
  },
  vehicle: {
    name: '',
    category: '',
    vin: '',
    id: '',
    address: '',
    registrationNumber: '',
    location: '',
  },
  setSeller: (seller) =>
    set((state) => ({ seller: { ...state.seller, ...seller } })),
  setVehicle: (vehicle) =>
    set((state) => ({ vehicle: { ...state.vehicle, ...vehicle } })),
}));

[dai-shi]

It looks good. Can you create a minimal reproduction with https://stackblitz.com/ ?

[Toshinaki]

same problem here.
I'm using the slice pattern

whether adding useShallow or not, my useStore hook shows that getSnapshot error and causes infinite loops.

Downgrading to v4 solved the problem, without any code changes.

[dbritto-dev]

@Nour-benmohamed-Git would you mind creating a minimal repro on stackblitz?

[Toshinaki]

@dai-shi @dbritto-dev
do you guys have any template for us to start with?
I'd be happy to provide a reproduction but create everything from scratch is very frustrating.

[dai-shi]

We are working on a stater: #2913

Can use this for now: https://stackblitz.com/github/leweyse/zustand/tree/feat/starter-example/examples/starter

[Toshinaki]

@dai-shi
here you go:
https://stackblitz.com/edit/github-omy9tt8q?file=src%2Fapp.tsx,package.json

without useShallow, useAppStore causes infinite loop.
but even with useShallow, this line also cause an infinite loop:

useShallow((state) => [
      state.test,
      state.test2,
      state.test2.items.map((item) => `-${item}`),  // <== this
])

removing this line and there's no infinite loop.

maybe I used this in a wrong way? v4 causes no error with the same code though.

---

also noticed the import of useShallow:

• import { useShallow } from 'zustand/shallow'
  https://zustand.docs.pmnd.rs/migrations/migrating-to-v5
• import { useShallow } from 'zustand/react/shallow'
  https://zustand.docs.pmnd.rs/guides/prevent-rerenders-with-use-shallow

[dai-shi]

.map creates a new array.

useShallow((state) => [
      state.test,
      [] // this doesn't work either
])

This works:

useShallow((state) => 
      state.test2.items.map((item) => `-${item}`)
)

[wenerme]

if shallow is not enough, try useDeepEqual

export function useDeepEqual<S, U>(selector: (state: S) => U): (state: S) => U {
  // https://github.com/pmndrs/zustand/blob/main/src/react/shallow.ts
  const prev = useRef<U>(undefined);
  return (state) => {
    const next = selector(state);
    return deepEqual(prev.current, next) ? (prev.current as U) : (prev.current = next);
  };
}

[KestasVenslauskas]

In my case it was the new empty array generation inside selector:

Infifite loop code:

const state = useArticleStore(
  useShallow((state: ArticleState) => {
    const block = state.advancedCategories[id];
    if (block) {
      return {
        refreshing: block.isFetching && Boolean(block.items?.length),
        lastFetchTime: block.lastFetchTime,
//NOTE: new array generation
        items: block.items ?? [],
      };
    } else {
      return {
        refreshing: false,
        lastFetchTime: 0,
//NOTE: new array generation
        items: [],
      };
    }
  }),
);

Fixed code:

  const emptyArray: HomeBlockType[] = [];
  const state = useArticleStore(
    useShallow((state: ArticleState) => {
      const block = state.advancedCategories[id];
      if (block) {
        return {
          refreshing: block.isFetching && Boolean(block.items?.length),
          lastFetchTime: block.lastFetchTime,
          items: block.items ?? emptyArray,
        };
      } else {
        return {
          refreshing: false,
          lastFetchTime: 0,
          items: emptyArray,
        };
      }
    }),
  );

[mayank1513]

Using useShallow is not a very good DX.

[mayank1513]

🚀 Hey folks! Give Kosha a try — https://www.npmjs.com/package/kosha
It’s optimized out of the box — no need for shallow hooks or extra selectors.

👉 If you're using plain Zustand without middleware, migrating is super simple:
Just replace

import { create } from "zustand"

with

import { create } from "kosha"

✅ And if you’re using the TypeScript double-call syntax like create()<T>(set => ({...})),
just switch to the simpler single-call version:

create<T>(set => ({...}))

That’s it — you’re good to go!

[mayank1513]

Thanks for the feedback. You are correct, it doesn't have plugin eco-system. As I mentioned earlier, straightforward replacement is for most users who don't use any middlewares. Yes. Json.stringify works, if any specific concerns could you please let me know. Thanks. Mayank Kumar Chaudhari Software Architect (Focus Front End) | Microsoft Certified Expert https://mayank-chaudhari.vercel.app/

…

On Thu, 5 Jun, 2025, 10:05 am Danilo Britto, ***@***.***> wrote: Doesn't look like production ready. But important: - is not a straight forward replacement - only persist middleware is available - use json.stringify to compare values - console.log everywhere - seems like a copy/paste from Zustand with few changes IMHO — Reply to this email directly, view it on GitHub <#1936 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCR4VICG56F4K2L3TUDXKL3B7CJZAVCNFSM6AAAAABOZP34LWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMZXGQ2TKNY> . You are receiving this because you commented.Message ID: ***@***.***>

[mayank1513]

In most use cases, selectors return small objects or arrays. Secondly, just double confirmed ` JSON.stringify({a: new Date()})` returns ` {"a":"2025-06-05T15:54:24.279Z"}` Thanks for pointing out `Set` and `Map`. It's very rare. But still I shall update this in documentation. Should not use `kosha` if you want to store `Set` or `Map` to global store. Mayank Kumar Chaudhari Software Architect (Focus Front End) | Microsoft Certified Expert https://mayank-chaudhari.vercel.app/

…

On Thu, Jun 5, 2025 at 9:18 PM Danilo Britto ***@***.***> wrote: JSON.stringify does not support Map, Date, Set and is expensive on large objects so is really bad using it for comparisons where you need to compare two objects many times — Reply to this email directly, view it on GitHub <#1936 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCR4VOCYFKDE5RNAIBW4MT3CBRDRAVCNFSM6AAAAABOZP34LWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMZYGE2DSNA> . You are receiving this because you commented.Message ID: ***@***.***>

[mayank1513]

That will not happen as we are comparing results of the same selector function - order is preserved. Mayank Kumar Chaudhari Software Architect (Focus Front End) | Microsoft Certified Expert https://mayank-chaudhari.vercel.app/

…

On Thu, 5 Jun, 2025, 9:47 pm Danilo Britto, ***@***.***> wrote: Most important if for some reason the keys are in different order the comparison is false so using JSON.stringify is not good — Reply to this email directly, view it on GitHub <#1936 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCR4VOKFM3QNI3NJI42VVD3CBUQLAVCNFSM6AAAAABOZP34LWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMZYGE4DINQ> . You are receiving this because you commented.Message ID: ***@***.***>

[Mustafa-Alie]

the problem :
If your state selector in react component return an object with with calculated values, this causes an infinite loop error
This problem happens if you use Zustand v5

Root cause:
Since Zustand v5 adopted React’s useSyncExternalStore under the hood (to support concurrent rendering and React 18+ compatibility), it delegates all re-render logic to React — including snapshot comparison

solution:
1- Return primitive or existing state data (not an object or an array)
2- Use a constant (memoized) array
3- Use Zustand Vanilla Store or createWithEqualityFn with custom equality

my preferred solution:
assuming that you have an array of todos in your store.

function useTodosMeta() {
const todos = useStore((state) => state.todos);
return useMemo(
() => todos.map((b) => ({ id: b.id, title: b.title })),
[todos],
);
const todosMeta = useTodosMeta();
console.log(todosMeta )

[Toshinaki]

Why not add the memorization (shallow & deepEquation) as a default?
since in a complicated app, in most cases what we need is a deeply nested object / array.
it feels verbose to add memorization & comparison manually every time.
People use state management libraries for complex use cases.

If all you want is just a simple primitive, there's really no need to use a 3rd party state management.
context and/or useState is more than enough for simple use cases.