Не выполняется прокрутка после изменения state

Я думаю, что это особенность Virtual DOM. React подготовил HTMLElement, но еще не вставил его в DOM документа. Поэтому функция прокрутки не сработала ожидаемым образом.

На уровне React получилось это решить только путем асинхронного вызова через несколько миллисекунд.

Я нашел более привлекательное решение с помощью CSS. Я добавил на контейнер прокручиваемой области с помощью flex обратное размещение элементом. И содержимое контейнера дополнительно обернул в еще один div, чтобы дочерние элементы не "реверснулись".

HTML

<div class="dialog-container">
    <div class="dialog-sheet">
        <div class="dialog-message">1</div>
        <div class="dialog-message">2</div>
        <div class="dialog-message">3</div>
    </div>
</div>

CSS

.dialog-container {
    display: flex;
    flex-direction: column-reverse;
}

В таком случае, прокрутка у меня работает снизу-вверх. Как мне нужно и при этом элементы имеют четкий порядок.

Похоже, из-за особенностей React, сначала вы скроллите вниз, и только потом добавляете элемент в state.

Попробуйте сделать так:

setImmediate(() => {
    this.scrollToBottom();
});