Why autorun runs before unmounting a component?

[tomaszferens]

I have an issue with autorun where it gets called when component is about to get unmounted.

Demo: here

Based on the demo:

1. Click "Assign user" button
2. Click "Unassign user" button
3. Open console and notice that there will be an error:

[mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@5]' Error: There is no user.

So, the question is: why is autorun being fired here, during unmounting? 🤔

I know I can fix the issue by reading maybeUser property in autorun but that feels a bit awkward :D

[urugator]

autorun/reaction is completely unaware of the component and it's lifecycle. It simply runs at the end of outermost action (transaction) - the order is not exactly specified - meaning one reaction/autorun shouldn't depend on another. Here, you assume that App (observer) is invalidated and rendered before autorun, which is not the case.
Also the effect's disposer function has a low priority I think (?), so it will always run after any autorun (not sure). (Probably not, it would be a bit inconvinient)
It also means that autorun may not see correct props as mentioned here: mobxjs/mobx-react#772 (comment) (3rd paragraph)

[tomaszferens]

Thanks @urugator. Looks like I won't be using autorun much then. For now, I pulled out all of the properties from user observable referred in autorun and passed them to useEffect's dependency array.

So, before:

useEffect(
  () =>
    autorun(() => {
      console.log(props.store.user.name);
    }),
  []
);

after:

const userName = props.store.user.name;
useEffect(() => {
  console.log(userName);
}, [userName]);

I think that should work as expected. Thanks again.