Почему рендеринг компонента React выполняется только один раз, а сокращение-действие меняет состояние несколько раз?

Question

У меня есть компонент React, который подключается к WebSocket серверу внутри componentDidMount.

componentDidMount() {
    const { connectWs } = this.props
    connectWs(
        true,
        () => {},
        () => {},
        res => {
            this.socketCallback(res)
        },
    )
}

socketCallback = payload => {
    const { handleClaimSuccess } = this.props
    const { horse_id, race_id } = payload
    const data = {
        'horseId': horse_id,
        'raceId': race_id
    }

    handleClaimSuccess(data)
}

render() {
    const { claimed } = this.props
    return (
        <div>
            {claimed.map((data, index) => (
                <div className="primary-text">
                     { data.isPending ? 'PENDING' : 'COLLECTED' }
                </div>
            )}
        <div>
    )
}

Сервер отправляет 3 сообщения через сокеты, которые компонент обрабатывает и отправляет на редуктор для обновления состояния. Разница во времени между этими 3 сообщениями составляет 30-60 мкс.

'handleClaimSuccess': (state, { payload }) => {
    if (payload) {
        const { horseId, raceId } = payload
        const updatedWinnings = state.userWinnings

        const indexOfWinningInClaimed = findIndex(updatedWinnings.claimed, {
            'horseId': horseId,
            'race': {
                'raceId': raceId
            },
        })

        updatedWinnings.claimed[indexOfWinningInClaimed].isPending = false

        return {
            ...state,
            'userWinnings': updatedWinnings
        }
    }

    return state
}

Все сообщения соответственно меняют состояние, но компонент отображает результаты только один раз (после 1-го сообщения) и игнорирует следующие 2 сообщения.

Насколько я понимаю, это связано с небольшим интервалом сообщений, потому что он отлично работает с отдельными сообщениями.

Как он может обрабатывать все 3 сообщения и отображать состояние после каждого сообщения?

Answer 1

Думаю, это связано с состоянием обновления React, реагирует только обещание, что оно изменит данные. Состояние обновления не обновляется каждый раз, когда вы отправляете разные данные, несколько обновлений можно объединить в одно, а массовое обновление - 1 раз. В вашем случае вы обновляете состояние 3 раза, поэтому реакция объединяет это в один и делает это только 1 раз.

Из документации React

updateState не изменяет сразу this.state, но создает ожидающий переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение. Нет гарантии синхронной работы вызовов на updateState, и вызовы могут быть сгруппированы для увеличения производительности.