кто может пояснить, почему в этом примере https://codesandbox.io/s/reactjs-playground-xwfdr?file=/src/index.js 3 setState вне setTimeout вызывают 1 рендер, но если обернуть в таймаут, то рендеров будет 3?

не сохранил изменения

сохранил

вижу

щас

може тому, що реакт вміє “сумувати” зміни стейту? Але коли ти засунув їх в інший контекст - розучився

ответ достойный экзамена по программированию

тут, вероятнее всего, работают внутренние оптимизации реакта. при вызове нескольких сетстейтов подряд (без доп. логики), реакт оптимизирует это, вызывая только последний сетстейт. с асинхронностью видимо это так не работает

https://github.com/facebook/react/issues/14259 вот тут в ишью расписано и плюс дают решение как вручную заставить реакт батчить апдейты(unstable правда 😅)

да, я тоже так предположил

о, спасибо)

Тут чутка не по теме, но в случае если будешь юзать тайм-аут с хуками, то есть еще проблемы с тем что он не правильное значение стейта будет брать

https://upmostly.com/tutorials/settimeout-in-react-components-using-hooks

А тебе надо ререндерить после каждого сте стейта?

Вот еще вроде норм решение через useCallback это делать https://stackoverflow.com/questions/53215285/how-can-i-force-component-to-re-render-with-hooks-in-react

не, мне не надо, я просто обратил внимание на такое поведение

Дякую, корисне👍)

А, да, довольно интересное поведение

Я насколько понимаю то, сет стейта при useState происходит асинхронно и наверное это все промисы, значит каждое выполнение сет стейта это микротаска в эвент лупе и реакт действительно может как-то отдетекитить серию подобных микротасок для одного компонента

А в случае выполнение микротасок которые находились внутри макротаски (setTimeout) как-то по интересному стек может наполнятся и просто реакт неможет как-то отдетектить что это подобные изменения и тупо каждый раз ререндерит компонент

В общем тут копать надо в сторону асинхрощины и как она работает в реакте

Как по мне в setTimeout вообще какая-то чертовщина происходит

Такие вещи можно попробовать отдебажить например через zonejs либу, чтоб понять что куда и как срабатывает...

А пока что просто пальцем в небо)

ну в принципе в ишью, который выше скинули, многое проясняется

А да, типа реакт не батчит апдейт стейта, если стейт меняется вне реакт ивент хендлеров, чем анонимная функция settimeout и является

Он я так понял батчится не будет, если ты прокинешь сет стейт функцию от useState в какой-то совсем левый коллбек какой-то левой либы или там свою функцию и тд?

смотря когда этот колбек вызывается

Можно батчит руками, есть UNSAFE_batch