How to optimize react-mobx rendering?

Question

WordPress

There is a simple mobx class:

class CntStore {
  @observable counter;
  @observable counter2;
  constructor() {
    this.counter = 0;
    this.counter2 = 0;
  }
  setTest() {
      console.log("SET counter");
      this.counter = 1;  // это вызовет функцию render у соответствующего react компонента
      console.log("SET counter2");
      this.counter2 = 1; // после этого снова вызовется функция render
      console.log("return setTest");
  }
}

It has a setTest() function that sequentially sets values ​​for observable properties. So how to make it so that in this case render is called only at the end of the function once, and not as it is now - after each assignment of a value to any property?

Answer 1

Found a reason. In permalinks, it was necessary to set /%postname%/ and I had /%category%/%postname%/

Answer 2

use an action decorator for the method + wrap any async callbacks that will be inside the method e.g.

@action
  setTest() {
      this.counter = 1;
      this.counter2 = 1; 
     //здесь будет только один рендер
      setTimeout(action(()=>{
            this.counter = 1;
            this.counter2 = 1; 
            //здесь тоже будет только один рендер
       }),1000) 
  }