Wondermarin

Потому что в каждой следующей итерации Вы возвращаете "сумму" разделенную на количество.

1. Добавить статус авторизации в redux. В компоненте если статус === REQUEST, то показывать заглушку, если процес авторизации завершился, то при статусе SUCCESS/FAILURE сделать редирект куда нужно.
2. Этот вопрос так же решается статусом. Так же нужно в момент инициализации приложения отправить запрос на авторизацию если есть токен в localStorage.

P.S. Для проверки логина пользователя на определенном роуте можно сделать враппер или HOC который будет чекать статус, показывать прелоадер или нужный роут.

Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript.

Оно?

Если исход одинаковый, можно условия комбинировать логическими операторами.
В данном случае логическим ИЛИ ||

const year = prompt('В каком году появилась спецификация ECMAScript-2015?');
alert( year == '2015' || year == '2016' ? 'правильно' : 'неправильно' );

Скорее всего, у вас после маунта происходит ещё какое-то изменение элемента, которое и меняет значение. Анимация или ещё что-то подобное.
Когда вы выводите весь ref в консоль и получаете значение оттуда, это происходит намного позже маунта, когда всё уже встало на свои места.

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

componentDidMount() {
  setTimeout(
    () => {
      if (typeof this.elementRef !== 'undefined') {
        console.log(this.elementRef.current.offsetLeft);
      }
    },
    5000
  )
}

Действие токена - 15 минут.
Действие рефреш токена - 7 дней. (одноразовый)
При обновлении обновляются сразу оба токена.
Обновление происходит прозрачно для пользователя по логике на фронтенде - если токену осталось жить менее минуты - идем и получаем новый перед следующим запросом.

Итого мы получаем возможность проверять авторизацию и блокировать пользователя только раз в 15 минут,
а пользователь может целую неделю не вводить пароль.