Почему мой реагирующий компонент не выполняет повторную визуализацию, когда componentShouldUpdate возвращает true?

Мне сложно понять, как работают хуки жизненного цикла в моем приложении React. У меня есть приложение, в котором я передаю некоторые реквизиты компоненту разбиения на страницы в моем методе рендеринга, например:

<Pagination
  totalRecords={this.state.blogPosts.length}
  pageLimit={5}
  pageNeighbours={2}
  onPageChanged={() => {console.log('page changed');}}
/>

В конструкторе разбиения на страницы я распечатываю значения свойств.

const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;
console.log('totalRecords=', totalRecords); 

Он выводит 0.

Честно говоря, я еще не получил свои сообщения в блоге. Итак, в componentDidMount я получаю сообщения в блоге следующим образом:

componentDidMount() {
  axios.get('/blogs').then(
    response => {
      if (response.data) {
        const entries = Object.entries(response.data);
        this.setState({ 
          blogPosts: entries.map(p => Object.assign({id: p[0]}, {...p[1]}))
            .sort((p1, p2) => p1.updatedAt > p2.updatedAt ? -1 : 1),
        });
      }
    },
    err => {
      console.log('err=', err);
    });
}

Итак, теперь сообщения в блогах заполнены, но компонент разбиения на страницы не обновляется (хотя сами блоги, кажется, обновляются).

Здесь мне нужно руководство о том, как работают хуки жизненного цикла React. Не запускается ли метод рендеринга повторно после изменения состояния? Я ожидаю, что компонент Pagination будет повторно отрисован, и на этот раз свойство totalRecords распечатает 3 (или какое-то число больше 0). Конструктор запускается только один раз, даже если он перерисовывается?

Так что на случай, если мне нужно запустить повторный рендеринг, я запустил это в методе componentShouldUpdate():

shouldComponentUpdate(nextProps, nextState) {
  console.log('this.state.blogPosts.length=', this.state.blogPosts.length);
  console.log('nextState.blogPosts.length=', nextState.blogPosts.length);
  return this.state.blogPosts.length !== nextState.blogPosts.length;
}

Действительно, this.state.blogPosts.length показывает 0, а nextState.blogPosts.length показывает 3. Итак, они разные, и я ожидаю, что состояние обновится с 3 сообщениями в блоге. Я возвращаю true, если длины отличаются, а они есть, поэтому компонент должен обновиться. Разве это не означает повторный рендеринг?

В любом случае totalRecords все равно 0. Я даже установил временной интервал в компоненте Pagination:

setInterval(() => {
  console.log('this.totalRecords =', this.totalRecords);
}, 5000);

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

Почему компонент Pagination не обновляется с новым значением totalRecords?