Difference, when observable variable is updated inside action method and plain function in mobx?

Question

I am using MBOX for state management in ReactJS .

I sometime update observable variable inside some function, than also it re-render the react component and sometime i use @action method to update the observable variable.

So what it is the difference between the two scenarios and what effect it will have on rendering?

Answer 1

An action is also a transaction , which means that any value that is derived from the observables you change in the action will be recalculated after the action is finished. If you don't wrap the function in an action , derived values might be calculated multiple times.

Example - Recalculation after action ( JS Bin )

@observer
class App extends Component {
  @observable x = 'a';
  @observable y = 'b';
  @computed get z() {
    console.log('computing z...');
    return `${this.x} ${this.y}`;
  }

  onClick = action(() => {
    this.x = 'c';
    this.y = 'd';
  });

  render() {
    return <div onClick={this.onClick}> {this.z} </div>;
  }
}

Example - Recalculation straight away ( JS Bin )

@observer
class App extends Component {
  @observable x = 'a';
  @observable y = 'b';
  @computed get z() {
    console.log('computing z...');
    return `${this.x} ${this.y}`;
  }

  onClick = () => {
    this.x = 'c';
    this.y = 'd';
  };

  render() {
    return <div onClick={this.onClick}> {this.z} </div>;
  }
}