react-compiler eslint rules causing an error

[maxwiseman]

I just updated my Next app to NextJS 15, and after enabling the React Compiler ESlint rules, I am getting an error on my Zustand store. This could just be me, but I think this is a fairly minimal setup, so I don't think I've done anything wrong. The error below is occurring on the underlined section of the last line. Everything still works fine, so I'm just eslint-disable-next-lineing it for now, but I'd like to figure out what's going on here. The specific ESlint rule causing this is react-compiler/react-compiler. I would make a bug report, but I can't seem reproduce it in a Stackblitz project. That might just be because I am setting up ESlint wrong in the Stackblitz though, I'm not sure. Any ideas?

eslint: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks

const useSettingsStore = create<{
    settings: UserSettings;
    setSettings: (arg0: UserSettings) => void;
  }>()(
    persist(
      (set) => ({
        settings: {
          colorScheme: "system",
        } as UserSettings,
        setSettings: (settings: UserSettings) => {
          set({ settings });
        },
      }),
      {
        name: "settings",
        storage: createJSONStorage(() => localStorage),
      },
    ),
  );

  const { settings, setSettings } = useSettingsStore();
                                    ^^^^^^^^^^^^^^^^

[dbritto-dev]

@maxwiseman would you mind sharing us a minimal repro on stackblitz?

[maxwiseman]

For some reason I can't get it to work on Stackblitz. I think because there doesn't seem to be a way to restart ESlint after it installs the react-compiler plugin? I did make a minimal reproduction in the form of a Github repo though, so if you'd like to clone that and run npm i, you should be able to see the issue in app/use-settings.tsx.

[dai-shi]

The eslint warning is correct.

export function useSettings() {
  type UserSettings = {
    colorScheme: "system" | "light" | "dark";
  };
  const useSettingsStore = create<{
    settings: UserSettings;
    setSettings: (arg0: UserSettings) => void;
  }>()(
    persist(
      (set) => ({
        settings: {
          colorScheme: "system",
        } as UserSettings,
        setSettings: (settings: UserSettings) => {
          set({ settings });
        },
      }),
      {
        name: "settings",
        storage: createJSONStorage(() => localStorage),
      },
    ),
  );

  const { settings, setSettings } = useSettingsStore();
}

☝️ You can't define a store inside a function.
It should be defined outside. 👇

type UserSettings = {
  colorScheme: "system" | "light" | "dark";
};
const useSettingsStore = create<{
  settings: UserSettings;
  setSettings: (arg0: UserSettings) => void;
}>()(
  persist(
    (set) => ({
      settings: {
        colorScheme: "system",
      } as UserSettings,
      setSettings: (settings: UserSettings) => {
        set({ settings });
      },
    }),
    {
      name: "settings",
      storage: createJSONStorage(() => localStorage),
    },
  ),
);

export function useSettings() {
  const { settings, setSettings } = useSettingsStore();
}

[maxwiseman]

Ahh, yes, you're right. Don't know what I was thinking. Thanks!