Странный порядок выполнения кода в react/javascript
помогите пожалуйста разобраться в этой магии. Есть асинхронная функция, которая в два этапа формирует данные и передаёт их для вывода на экран. Не могу понять, как получается, что на экран выводится сначала результат первого этапа, а через какое-то время результат второго этапа.
Состояние, где хранится значения о записях:
const [tickets, setTickets] = useState([]);
Функция, которая формирует записи:
useEffect(() => {
async function ticketsInit() {
//(1) получаем массив значний времени для записи
//из синхронной функции [10:30, 10:34, 10:38, ...]
const intervalsArr = getIntervalsArr()
//(2) получаем значения времени из БД,
//на которые запись уже осуществлена
//в конкретный день
const bookedArr = await getBookedTickets (activeDay)
let tickets = []
//(3) перегоняем массив значений времени в объекты в tickets,
//где помимо самого времени хранится дата и количество записей
await intervalsArr.map(ticket => {
tickets.push({date:activeDay, time:ticket, bookingCount:0})
})
//(4) проходим по записям из БД и вносим в tickets значения
//о количестве записей на каждый ticket
await bookedArr.map(booked => {
for (let i = 0; i < intervalsArr.length; i++) {
if (booked.time === intervalsArr[i]) {
tickets[i].bookingCount++
}
}
})
setTickets(tickets) //(5) передаём объекты tickets в состояние, чтобы они вывелись на экране
}
ticketsInit()
},[activeDay])
Вывод на экран:
{tickets.map(ticket =>
<button key={ticket.time}>
{ticket.date}, {ticket.time}, {ticket.bookingCount}
</button>
)}
Сначала на экран выводится только время, то есть то что получается в результате работы первой строки(*1). Каким образом в tickets попадают значения времени после (*1), если значения времени лежат в отдельной переменной intervalsArr, и только после выполнения (*3), время вместе с датой попадает в tickets (но при этом дата почему-то не выводится)?
, 10:30, 0
, 10:34, 0
, 10:38, 0
, 10:42, 0
, 10:46, 0
А через пару секунд выводятся полноценные данные, с датой и количеством записей на определённое время:
06.06.22, 10:30, 1
06.06.22, 10:34, 2
06.06.22, 10:38, 0
06.06.22, 10:42, 0
06.06.22, 10:46, 0