ComponentDidMount prevents observer

[filipetedim]

Context

I'm creating a greenfield project with CRA TypeScript and MobX 6. I've only added mobx and mobx-react to it, along with the following tsling.json settings:

• yarn create react-app cra-test --template typescript
• yarn add mobx mobx-react

"useDefineForClassFields": true,
"experimentalDecorators": true

I'm running on Windows 11, WSL 2 and VSCode with Hyper setup for WSL as terminal. My project folder resides within the linux subfolders under \\wsl$\Ubuntu\home\$user\ as anywhere outside (meaning in mounted windows folders) was not allowing the hot reloading to work.

Problem

For some reason, using observer on a class that has a componentDidMount prevents that class from observing.
However removing the componentDidMount call correctly makes it update.
Furthermore, the same code in this codeandsandbox I've built works correctly.

The only difference between that and my local CRA app is that it was initialized with CRA TypeScript which adds a little bit of boilerplate.
I've also noticed that my local logs "mounted" twice, whereas codeandsandbox only does once, unsure if it's affecting it or not.

As soon as I remove componentDidMount, it updates correctly.
It also happens regardless of using a decorator or exporting as observer(App)

Steps taken

I've already rebuilt and created twice, same problem. Also tested with components instead of the main App.js and the same happened. componentDidUpdate seems to be working however.

I believe it might be something I'm completely misunderstanding with MobX 6m, although I was under the impression MobX does not care much about the React lifecycle after some digging around.

Any ideas? Thanks!
Edit: I am aware I don't need to use class based components, but I still want to understand the reasoning as this prototype will be for a full refactor of our company's main app, where we have very specific bits of code that we need to run before rendering on some components. I'm also aware there are probably better approaches but when deep diving into a refactor like this I want to feel comfortable enough in understanding the specifics of the new tech we will move into.

Code

Store.js

import { makeAutoObservable } from "mobx";

class AppStore {
  constructor() {
    makeAutoObservable(this);
  }

  count = 0;

  increaseCount = () => this.count++;
}

export default new AppStore();

App.js

import React from "react";
import { observer } from "mobx-react";

// Store
import Store from "./Store";

@observer
class App extends React.Component {
  componentDidMount() {
    console.log("mounted");
  }

  render() {
    return (
      <div>
        <p>Store count: {Store.count}</p>
        <button onClick={Store.increaseCount}>Increase count</button>
      </div>
    );
  }
}

export default App;

[kubk]

@filipetedim Thanks for a detailed report. Am I right that you unable to reproduce this issue in codesandbox?

[filipetedim]

Hey. I've tried to be as detailed as I could possibly be. I was going to open an issue out of this but also thought best to ask the community first.

You are correct, I cannot reproduce in codesandbox (link in post above). I believe it is because that code isn't built from CRA TS. For more context (which I'll edit now on the post), I'm using Windows 11, WSL 2 and VSCode with Hyper. My project folder resides within the linux subfolders.

[kubk]

@filipetedim Can you set up a simple github repo with reproduction?

[filipetedim]

Yes, I'll do it later toda if it's alright, busy day, will comment again in some hours!

[mweststrate]

Is componentDidMount accidentally defined as arrow function in the real case?

…

On Wed, 27 Apr 2022, 20:04 Egor G, ***@***.***> wrote: @filipetedim <https://github.com/filipetedim> Can you set up a simple github repo with reproduction? — Reply to this email directly, view it on GitHub <#3379 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGDLEFB7F5YUZWHUKLVHGFVLANCNFSM5UPUOM2Q> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[filipetedim]

Hey @mweststrate. No it's not, code was copy pasted into that section above.
Real code:

[urugator]

Have you tried production build? With any kind of HMR out of the picture?

[anthonylowther21]

I can confirm the exact same behavior. I kept running into issues with Mobx React components not updating, and finally tracked it down to this exact issue. When I remove componentDidMount (event a completely empty method), I can observe stores again.

This is a monumental gotcha. Please fix it

[urugator]

I've also noticed that my local logs "mounted" twice,

Dunno why it happens in this case, but it could be a similar problem to:
#3395
In short the problem is that we don't account for remounting the same component instance atm.

[urugator]

Just released mobx-react@7.5.1, could you give it a try?

[tongzhenyu0312]

just remove <React.StrictMode> at the entry.

[kubk]

After the fix referred by urugator above, it should work even with the strict mode: #3434