React not rerendering after mobx observer change

Question

Upon page load, I see "hi2" When I click the button, nothing happens. I tried with setUser as well.

I suspect I'm just editing the props themselves and somehow the observable is not being triggered?

See sample code of it not working here in a brand new rails/react environment: https://github.com/bufordtaylor/mobxtest

1. clone
2. bundle
3. rails s
4. (in another process) ./bin/webpack-dev-server --host 127.0.0.1
5. navigate to localhost:3000

======================

UPDATE:

I've reduced it to it's basic form, eliminating possible import errors, Provider errors, or constructor errors.

Here it is

import React from 'react'
import ReactDOM from 'react-dom'
import { observable, action, computed } from 'mobx';
import { Provider, inject, observer } from 'mobx-react';


class UserStore {

  @action setUser(val) {
    console.log(val);
    this.user = val;
  }

  @observable user = "default";
}

const userStore = new UserStore();

@observer
class Hello extends React.Component {
  render() {
    return (
      <div>
        hi2 {this.props.userStore.user}
        <button onClick={this.props.userStore.setUser.bind(this,"fwefwe")}>faew</button>
      </div>
    )
  }
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello userStore={userStore} />,
    document.getElementById('app'),
  )
})

Answer 1

My problem was the order of wrapping the component, because I was using Material UI framework.

Wrong:

export inject('store')(observer(withStyles(styles)(MyComponent)));

Correct:

export withStyles(styles)(inject('store')(observer(MyComponent)));

So, it's important the order with MobX and React Material UI.

Answer 2

Your code looks sound. I think you have stumbled upon an issue discussed in the How to (not) use decorators part of the documentation. It is important that transform-decorators-legacy is first in the list of babel plugins.

Answer 3

if you use the latest version of mobx, and babel version 7.12 add this to you constructor

makeObservable(this)

Answer 4

<button onClick={this.props.userStore.setUser.bind(this,"fwefwe")}>faew</button>

Be careful. You are binding this. This in this case is the instance of the Hello Component. Now the this in the setUser function points to the Hello Component. So setUser will set a property user in the Hello Component.

 @action setUser(val) {
    console.log(val);
    this.user = val; // This this now points to the Hello Component.
  }

To understand what I mean, you can set a breakpoint on the setUser method, then inspect the variable this. You will see that it points to the Hello Component and not to your stores instance.

Instead do the following:

<button onClick={() => { this.props.userStore.setUser("fwefwe"); }}>faew</button>

Here I am creating a lambda that calls setUser on the user store. Because I am using a lambda here, the this in this.props.userStore points to the Hello Component.

Answer 5

For anyone arriving here, make sure you're not being a complete idiot like me and that you didn't forget to add the @observer decorator before the class component.

(Or the @observable decorator in the store)

God, wasted a full day on that

Answer 6

I had similar issue, I was using arrow function for render method:

render = (): React.ReactNode

correct should be:

render(): React.ReactNode

still not sure why first case confuses mobx.