Calling actions asynchronously from componentWillMount does not trigger react rerender, while from componentDidMount does

[philipstanislaus]

Hello,

thanks for your awesome work on mobx-react!

I observe a behavior that I could not find documented and looks like a bug: when calling an action asynchronously from a componentWillMount hook, the react component will not rerender, when calling the action from an componentDidMount hook, it will.

Failing example with componentWillMount

import { action, observable } from 'mobx'
import { observer } from 'mobx-react'
import * as React from 'react'

@observer
export class WillMount extends React.Component<{}, {}> {
  @observable counter = 0

  @action inc = () => this.counter++

  componentWillMount = () => {
    setTimeout(() => this.inc(), 3000)
  }

  render() {
    return <p>{this.counter}<button onClick={this.inc}>+</button></p>
  }
}

As the following console output shows, this.inc() is triggered, and this.counter is updated correctly, yet no rerender is scheduled:

Strangely, calling the action manually by clicking the button does also not trigger a rerender:

Working example with componentDidMount

import { action, observable } from 'mobx'
import { observer } from 'mobx-react'
import * as React from 'react'

@observer
export class DidMount extends React.Component<{}, {}> {
  @observable counter = 0

  @action inc = () => this.counter++

  componentDidMount = () => {
    setTimeout(() => this.inc(), 3000)
  }

  render() {
    return <p>{this.counter}<button onClick={this.inc}>+</button></p>
  }
}

This works as expected, here is the console.log:

Also clicking the button works now, see:

Questions

Is this expected behaviour? If yes, can we enhance the documentation?

[mweststrate]

Afaik both approaches should work correctly. Which mobx-react version does this happen in? Would you be able to set up a fiddle, forked from https://jsfiddle.net/mweststrate/wv3yopo0/ to reproduce the issue?

[philipstanislaus]

@mweststrate sure, here is the fiddle: https://jsfiddle.net/mweststrate/wv3yopo0/

I only tested it with the latest version of mobx-react, 4.1.0.

[philipstanislaus]

@mweststrate do you have any news on this? Can I help to fix it?

[danielbrodin]

Not sure if it's the same reason, but I'm having problem using InteractionManager.runAfterInteractions() from both componentDidMount and componentWillMount using mobx 3.1.7 and mobx-react 4.1.3.

[mweststrate]

@philipstanislaus Investigated the issue. The problem is that you are defining componentWillMount on the instance and not on the class. So it will kill the componentWillMount defined by mobx.

Using

@observer
export class WillMount extends React.Component<{}, {}> {
  @observable counter = 0

  @action inc = () => this.counter++

  componentWillMount() {
    setTimeout(() => this.inc(), 3000)
  }

  render() {
    return <p>{this.counter}<button onClick={this.inc}>+</button></p>
  }
}

fixes the issue. The same holds btw for didMount, it breaks it as well, it is just less notable (but it would be in the devtools).

Mobx-react 4.1.4 will throw if you are accidentally overwritting the lifecycle hook on the instance

[mweststrate]

Released 4.1.4, feel free to re-open if not resolved

[philipstanislaus]

Perfect, that solves my problems!

[isaachinman]

I just got burnt by this in mobx-react 5.0.0 and lost an hour trying to figure it out. @mweststrate Are you sure this is supposed to be fixed? There's still a warning about it in the main README as well.

[mweststrate]

@isaachinman I don't know what the 'this' or 'it' you are talking about are. Please open new issue including code / reproduction, or PR the docs if something was unclear.

[isaachinman]

@mweststrate This issue (#195) is linked to from the docs. It should be self-evident what this issue is about.

Directly from the main README:

If updates to an observable store are not triggering render(), make sure you are using Class methods for React lifecycle hooks such as componentWillMount() {}, using componentWillMount = () => {} will create a property on the instance and cause conflicts with mobx-react. See mobx-react #195 for more details.

I was using an instance-based arrow function for componentWillMount, and noticed that mobx-react was not triggering render when an observable array had changed. I spent some time looking around, and eventually landed here.

Sure, I can create a minimal example to reproduce this if you want, but that seems rather silly as it's already well-documented enough to be in the main README.

From 43d4d71:

Made lifecycle hooks used by mobx-react read-only to make sure they are not accidentally overwritten in component instances. Fixes, #195, #202. Note that they can still be defined, just make sure to define them on the prototype (componentWillMount() {}) instead of the instance (componentWillMount = () => {}). Which is best practice anyway.

Is this to say that instance-based functions are simply not supported by mobx-react whatsoever, with no future plans to support them?

[mweststrate]

@isaachinman ah. Was interpreting your message in the context of the messages above of and couldn't make sense of it. The instance function restriction only apply to the life cycle hooks. You can use them fine for your own functions / event handlers. Note that there is never a reason to use instance functions for lifecycle hooks, as React will invoke them with the right context anyway, and you will be unnecessary binding functions for every component instance.