Объединяет ли mobx несколько изменений состояний в один вызов?

Question

[ikutin666]

Если использовать useState, и вызывать функцию которая изменит его два раза, то приложение отрисуется два раза, а если сделать такую же логику в mobx? он отрисуется один раз?

я хочу при обновления двух стейтов, что бы они объединились в одно обновление стейта, и приложение отрисовалось один раз как в react 18 )

всех благ :)

Comments

[insighter]

вызывать функцию которая изменит его два раза, то приложение отрисуется два раза,

не знаю как на классах, но на функциях такого нет, все вызовы объединятся в один

[WbICHA]

insighter, зависит от версии реакта.

[insighter]

WbICHA, у меня 16.0, я ошибаюсь по части такого поведения?

[WbICHA]

insighter, https://github.com/reactwg/react-18/discussions/21

[insighter]

WbICHA, спасибо за ссылку, а старые версии Реакта, батчат только свои обработчики событий, или и те которые добавлены через addEventListener тоже?

[WbICHA]

insighter, честно говоря, без понятия.)
И что значит "старые версии"? 16 и 17 реакты? Потому что хуки только в 16 появились, а в классовых компонентах нет необходимости в батчинге.

[Alexandroppolus]

insighter, в старых версия батчатся только свои реактовские. Можешь проверить например через setTimeout, там не должно быть батча.

[insighter]

Alexandroppolus, setTimeout понятно, а вот addEvenentListener("click",...)
этот как будет работать?

[Alexandroppolus]

insighter, вроде бы как setTimeout. Это нативное действие, которое не оборачивается Реактом (в отличии от реактовского эвента), потому и нет батча.

[insighter]

Alexandroppolus, WbICHA

Короче я не поленился и проверил, не батчатся обработчики, которые руками привязали к событиям.
Получается в 16-17 версиях они просто приостанавливали обновление состояний до тех пор пока обрабатываются синтетические события, никакой магии, расходимся

https://codepen.io/wega-cap/pen/vYmMrKq

Answer 1

[profesor08]

И не должен. У тебя все изменения происходят в экшене.

Comments

[Alexandroppolus]

Это если всё внутри одного экшена. Если просто вызовется два отдельных экшена, то уже не будет.

[profesor08]

Alexandroppolus, нет никаких если.

[Alexandroppolus]

profesor08, есть.

вот пример в 17 реакте:

import { makeObservable, observable, action } from 'mobx'
import React from 'react'
import { observer } from 'mobx-react-lite'

class Store {
  constructor() {
    makeObservable(this)
  }

  @observable value1 = 1

  @observable value2 = 1

  @action inc1 = (): void => {
    this.value1 += 1
  }

  @action inc2 = (): void => {
    this.value2 += 1
  }

  @action incAll = (): void => {
    this.inc1()
    this.inc2()
  }
}

const store = new Store()

export const App: React.FC = observer(() => {
  const handler = (): void => {
    setTimeout(() => {
      store.inc1()
      store.inc2()
      //store.incAll()
    }, 10)
  }

  console.log('render', store.value1, store.value2)

  return (
    <button type="button" onClick={handler}>
      {store.value1}, {store.value2}
    </button>
  )
})

здесь при нажатии на кнопку 2 ререндера, первый из которых с разными числами. Если в хендлере заменить store.inc1();store.inc2(); на store.incAll(), который оборачивает всё в один экшен, то уже один рендер. Ну а если просто убрать setTimeout, то всегда один рендер из-за реактовского батчинга.

[profesor08]

Alexandroppolus, прочитай еще раз мой ответ