[email protected]? being read outside a reactive context

[codeBelt]

Can someone hep me understand why I get the following warning and what I should be doing differently.

[mobx] Observable [email protected]? being read outside a reactive context

Code https://codesandbox.io/s/observable-init-read-outside-1bjvz?file=/src/App.tsx

export const App = observer(() => {
  const [localStore] = useState(() =>
    observable({
      name: '',

      init(name) {
        this.name = name;
      },
    })
  );

  useEffect(() => {
    localStore.init('CodeSandbox');
  }, [localStore]);

  return (
    ...
  );
});

[mweststrate]

I think this should fix it: pass `{init: action}` as second argument to `observable` (or use `useLocalObservable` hook from mobx-react-lite)

…

On Mon, Jan 18, 2021 at 5:20 PM Robert S. ***@***.***> wrote: Can someone hep me understand why I get the following warning and what I should be doing differently. [mobx] Observable ***@***.***? being read outside a reactive context *Code* https://codesandbox.io/s/observable-init-read-outside-1bjvz?file=/src/App.tsx export const App = observer(() => { const [localStore] = useState(() => observable({ name: '', init(name) { this.name = name; }, }) ); useEffect(() => { localStore.init('CodeSandbox'); }, [localStore]); return ( ... );}); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2722>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDNM6N2A5C3SUOFDLLS2RUUPANCNFSM4WHTKFZA> .

[codeBelt]

Thanks for the fast response. I tried what you suggested and still get the warning for all of the following:
https://codesandbox.io/s/observable-init-read-outside-example-2-hprn1?file=/src/App.tsx

import { action, configure, observable } from "mobx";
import { observer, useLocalObservable } from "mobx-react-lite";

const store = {
  init() {} // action
};
...
const localStore = useLocalObservable(() => store);
...
const localStore = useLocalObservable(() => store, { init: action });
...
const [localStore] = useState(() => observable(store));
...
const [localStore] = useState(() => observable(store, { init: action }));

useEffect(() => {
  localStore.init();
}, [localStore]);
...

Note: ES6 Classes with makeObservable or makeAutoObservable work fine without any warnings.

[codeBelt]

@mweststrate is this an issue with factory functions? Should I create a bug ticket?

[mweststrate]

Please be patient, we're all just volunteering here.

…

On Tue, Jan 19, 2021 at 3:56 PM Robert S. ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> is this an issue with factory functions? Should I create a bug ticket? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2722 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBH5RISYX2UR6MOQG3TS2WTSJANCNFSM4WHTKFZA> .

[codeBelt]

Note sure why I didn't try makeAutoObservable with the factory function and only with a Class but doing so made the warning go away.

Code: https://codesandbox.io/s/makeautoobservable-init-read-outside-forked-2yirn?file=/src/App.tsx

export const App = observer(() => {
  const [localStore] = useState(() =>
    makeAutoObservable({
      name: "",

      init(name: string) {
        this.name = name;
      }
    })
  );

  useEffect(() => {
    localStore.init("CodeSandbox");
  }, [localStore]);

  return (
    ...
  );
});

I will change my code to use makeAutoObservable.

[urugator]

I think this is a "bug" in proxy impl that creates pendingKey even outside derivation:
https://github.com/mobxjs/mobx/blob/main/packages/mobx/src/types/dynamicobject.ts#L50
Hopefully shouldn't occur in #2641.
However, we are considering that functions, that are not explicitely annotated, will be observable as well - in such case it would throw anyway and you would either have to disable the observableRequiresReaction or you would have to:

useEffect(() => {
    runInAction(() => {
       localStore.init("CodeSandbox");
    })    
  }, [localStore]);