Как оптимизировать рендеринг react-mobx?

Question

[noneim]

Есть простейший класс mobx класс:

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");
  }
}

У него функция setTest(), в которой последовательно устанавливаются значения наблюдаемым свойствам. Так вот как сделать чтобы в этом случае render вызывался уже только в конце функции один раз, а не как сейчас - после каждого присваивания значения какому-либо свойству?

Answer 1

[bgnx]

используйте action декоратор для метода + оборачивайте любые асинхронные коллбеки которые будут внутри метода например

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