title: Why mobX action doesn't trigger rerendering of React component
body: <p>I have a weird behavior of MobX.</p>
  <p>Here is my store in the file <code>store.tsx</code>. You can find it also as a <a href="https://codesandbox.io/s/test-mobx-iyg544?file=/src/App.tsx" rel="nofollow noreferrer">sandbox</a>.</p>
  <pre><code>import { action, makeObservable, observable} from &quot;mobx&quot;;
  
  export default class ViewStore {
    currentProjectId: string | undefined = undefined;
  
    constructor() {
      makeObservable(this, {
        currentProjectId: observable,
        setCurrentProjectId: action,
      });
    }
  
    setCurrentProjectId = (projectId: string | undefined) =&gt; {
      this.currentProjectId = projectId;
    };
  }
  </code></pre>
  <p>And here is my component</p>
  <pre><code>import React from &quot;react&quot;;
  import { observer } from &quot;mobx-react-lite&quot;;
  import { useParams } from &quot;react-router-dom&quot;;
  
  import ViewStore from &quot;./store&quot;;
  
  interface Props {
    localStore: ViewStore;
  }
  
  interface UrlParams {
    projectId: string;
  }
  
  function AppManageProject({ localStore }: Props) {
    const urlParams = useParams&lt;UrlParams&gt;();
  
    if (localStore.currentProjectId !== urlParams.projectId) {
      localStore.setCurrentProjectId(urlParams.projectId);
      return &lt;&gt;&lt;/&gt;;
    }
  
    return (
          &lt;div&gt;{localStore.currentProjectId}&lt;/div&gt;
    );
  }
  
  export default observer(AppManageProject);
  </code></pre>
  <p>The page is part of a larger app and it's reached from the route <code>/&lt;project id&gt;</code>. When you first browse to e.g.  <code>/prj1</code>, the if block is executed, so the observable <code>currentProjectId</code> is set to &quot;prj1&quot; via the MobX action <code>setCurrentProjectId</code>. I expect the change of the observable to trigger a rerendering, where now <code>urlParams.projectId === localStore.currentProjectId</code>. But the component is actually not rerendered.</p>
  <p>In the <a href="https://codesandbox.io/s/test-mobx-iyg544?file=/src/App.tsx" rel="nofollow noreferrer">sandbox</a>, from the printout in the console, you can se that you do enter in the if block, but the rerendering is not triggered.</p>
  <p>Notice that if instead of calling the action <code>setCurrentProjectId</code> directly, I use a callback, e.g. <code>setTimeout(() =&gt; localStore.setCurrentProjectId(urlParams.projectId), 0)</code> then everything works.</p>
  <p>Thinking that the callback works because it uses an arrow function, I also tried to replace</p>
  <pre><code>localStore.setCurrentProjectId(urlParams.projectId)
  </code></pre>
  <p>with a call to an arrow function:</p>
  <pre><code>( () =&gt; localStore.setCurrentProjectId(urlParams.projectId) ) ()
  </code></pre>
  <p>But this also doesn't work.</p>
  <p>Does anyone have any explanation/solution of what is going on?
  Thank you</p>