Mobx fast refresh issue (Next.js)

[TeosVerdi]

Hello!

I can't seem to find a way to set initial checkbox state from MobX store after a refresh from Next.js. As soon as i refresh the page, it renders with the state i set before.

For example: i check the checkbox (which has the checked/onChange routed to MobX) -> Page refresh -> The input persists to be checked, while the state is set to false.

I've tried all the other ways to pass the observer HOC (Observer, useObserver), disabling hydration, reworking store, but to no avail.

Versions

• Next.js: 10.0.6
• React: 17.0.1
• Mobx: 6.1.4
• mobx-react: 7.1.0

Here's the code:

store/ThemeStore.ts

import { makeAutoObservable } from 'mobx';

export type ThemeHydration = {
    darkTheme: boolean;
};

class ThemeStore {
    darkTheme = false;

    constructor() {
        makeAutoObservable(this);
    }

    setDarkTheme(value: boolean) {
        this.darkTheme = value;

    }

    hydrate(data?: ThemeHydration) {
        if (data) {
            this.darkTheme = data.darkTheme;
        }
    }
}

export default ThemeStore;

pages/index.tsx

import React, { useEffect } from "react";
import { reaction } from "mobx";

import styles from "@/styles/homepage.module.scss";
import { observer } from "mobx-react";
import { useStore } from "@/stores";

const HomePage = observer(function () {
  const { themeStore } = useStore();

  useEffect(() => {
    const re = reaction(
      () => themeStore.darkTheme,
      (value) => {
        const body = document.body;

        if (value) {
          body.classList.remove("theme-light");
          body.classList.add("theme-dark");
        } else {
          body.classList.remove("theme-dark");
          body.classList.add("theme-light");
        }
      },
      { fireImmediately: true }
    );
    return () => {
      re();
    };
  }, []);

  return (
    <div className={styles.container}>
      <main className={styles.main}>
          <input
            type="checkbox"
            defaultChecked={themeStore.darkTheme}
            onChange={(e) => {
              themeStore.setDarkTheme(e.target.checked);
            }}
          />
      </main>
    </div>
  );
});

export default HomePage;

stores/index.tsx

import React, { ReactNode, createContext, useContext } from "react";
import { enableStaticRendering } from "mobx-react";

import RootStore, { RootStoreHydration } from "./RootStore";

enableStaticRendering(typeof window === "undefined");

export let rootStore = new RootStore();

export const StoreContext = createContext<RootStore | undefined>(undefined);

export const useStore = () => {
  const context = useContext(StoreContext);
  if (context === undefined) {
    throw new Error("useRootStore must be used within RootStoreProvider");
  }

  return context;
};

function initializeStore(initialData?: RootStoreHydration): RootStore {
  const _store = rootStore ?? new RootStore();

  if (initialData) {
    _store.hydrate(initialData);
  }
  // For SSG and SSR always create a new store
  if (typeof window === "undefined") return _store;
  // Create the store once in the client
  if (!rootStore) rootStore = _store;

  return _store;
}

export function RootStoreProvider({
  children,
  hydrationData,
}: {
  children: ReactNode;
  hydrationData?: RootStoreHydration;
}) {
  const store = initializeStore(hydrationData);

  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
}

Thanks in advance!

[urugator]

See #2668 (comment)

[TeosVerdi]

I've seen this discussion, but the problem still persists with Next.js.
I tried changing the package resolution to "react-refresh": "^0.9.0", but it doesn't solve the problem.

[urugator]

It's not solved, the issues (in mentioned repos) are still open.

[gaearon]

How is #2668 related? It seems like a different symptom and an entirely different problem.

[gaearon]

(That said I don't really understand this issue report, it's hard for me to say what expected/actual steps are.)

[codeBelt]

@TeosVerdi seems like you need to persist the data outside of your app because I think you are setting the darkTheme in memory and when you refresh the page you lose that darkTheme change. You will have to save the value in the browser (i.e. localStorage). Check out https://github.com/quarrant/mobx-persist-store#readme