function Sorter({ redux_state_obj, set }) {
const handle_click = () => {
const new_state = JSON.parse(JSON.stringify(redux_state_obj))
// update new_state based on redux_state_obj
set(new_state)
}
return <div onClick = {handle_click}>button</div>
}
Предположим, я дважды очень быстро нажимаю на Sorter. Может ли redux_state_obj быть устаревшим во втором клике, то есть он использует redux_state_obj до того, как первый щелчок обновил его?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Javascript выполняется в одном потоке с использованием цикла событий и очереди задач для обеспечения согласованности и обеспечения возможности асинхронных операций.
Вот хорошая статья о том, как это работает и как планируются задачи: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#try-it
Самый простой алгоритм очереди задач таков:
В вашем случае первый щелчок запланирует выполнение функции handle_click,
затем он будет выполнен (синхронно изменяя ваше состояние редукции).
Если вы щелкнете, когда ваша функция выполняется (основной поток занят), браузер просто запланирует задачу для обработки этого второго щелчка, и она будет завершена только после возврата вашей функции. Таким образом, второй вызов handle_click будет выполнен с актуальными значениями состояния.
Тем не менее, в библиотеках redux или react может быть асинхронный код, который планирует обновление состояния для другой задачи. В этом случае ваш второй вызов handle_click произойдет ДО запланированного обновления состояния. Например, одним из известных примеров этого в реакции является метод setState: https://sentry.io/answers/forget-set-state-is-async/
Но для того, чтобы такая ситуация возникла, вы должны щелкать быстрее, чем браузер выполнит вашу функцию обработчика, что может быть порядка наносекунд, поэтому вам нужно быть самой быстрой рукой на всем Диком Западе, иначе ваш обработчик должен быть написан очень плохо.