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 facebook/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]));

[tylim88]

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

[tylim88]

useShallow works, thanks

[SOMONSOUM]

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

My Store:

import { RolesResponse } from "@/__generated__/graphql";
import { ErrorResponse } from "@/types";
import { StoreApi, UseBoundStore, create } from "zustand";

interface RolesState {
  roles: RolesResponse | null;
  error?: ErrorResponse | null;
  setRoles: (roles: RolesResponse | null) => void;
  setError: (error?: ErrorResponse | null) => void;
}

export const createRolesStore = (
  initialRoles: RolesResponse | null,
  initialError?: ErrorResponse | null
) =>
  create<RolesState>()((set) => ({
    roles: initialRoles,
    error: initialError,
    setRoles: (roles: RolesResponse | null) => set({ roles }),
    setError: (error?: ErrorResponse | null) => set({ error }),
  }));

export let useRolesStore: UseBoundStore<StoreApi<RolesState>>;

export const initializeRolesStore = (
  initialRoles: RolesResponse | null,
  initialError?: ErrorResponse | null
) => {
  useRolesStore = createRolesStore(initialRoles, initialError);
};

and this is what I use

 const { roles, error } = useRolesStore(
    useShallow(({ roles, error }) => ({
      roles,
      error,
    }))
  );

[dai-shi]

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

[SOMONSOUM]

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,
  }));

[dai-shi]

If useRolesStore((s) => s) still causes an error, useShallow doesn't help and it's a different issue. You may need to create a minimal reproduction with https://stackblitz.com.

[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.

[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/ ?