Антон Спирин

Используйте событие input

В конце текста ошибки ссылка с ответом на ваш вопрос.

Еще почитать: Тыц, тыц

Можно так.

Если надо производить какое-то действие каждую секунду, то правильней использовать setInterval:

function startTimer(secs) {
  var i = 0;
  var timer = document.getElementById('timer');

  var interval = setInterval(function() {
    if (++i >= secs) {
      clearInterval(interval);
      timer.innerHTML = 'Done!';
    } else {
      ++timer.innerHTML;
    }
  }, 1000);
}

startTimer(10);

Демо.

Если действие каждую секунду производить не надо, то таймаут рациональней задать один на всю длительность:

function startTimer(secs) {
  var timer = document.getElementById('timer');
  setTimeout(function() {
      timer.innerHTML = 'Done!';
  }, secs * 1000);
}

startTimer(10);

Демо.

У вас у корневого маршрута стоит свойство exact, это значит, что переход на него будет только при точном совпадении пути с /. По пути /rigs компонент Main отрендерен не будет.
Решить проблему можно так:

<Switch>
  <Route path="/auth" component={Auth} />
  <Route path="/" component={Main} />
</Switch>

Можно использовать debounce или throttle:

function debounce(f, ms) {

  let timer = null;

  return function (...args) {
    const onComplete = () => {
      f.apply(this, args);
      timer = null;
    }

    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(onComplete, ms);
  };
}

function throttle(func, ms) {

  var isThrottled = false,
    savedArgs,
    savedThis;

  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, ms);
  }

  return wrapper;
}

Код вашего хандлера при использовании debounce будет такой:

function handler() {
  // do something
}

var debouncedHandler = debounce(handler, 500);

document.querySelecror('.submit').addEventListener('click', debouncedHandler);

С throttle аналогично.

Реализации debounce и throttle есть в lodash. Если используете эту библиотеку можно взять оттуда.

Хорошо знать, что они есть и какие задачи решают. Стоит понимать, что JavaScript и, в частности, код React приложения, сильно далек от классического ООП и во многих классических паттернах тут нет необходимости. А что-то уже реализовано в браузерных API и библиотеках которые вы используете.
В JavaScript и в React разработке используются свои паттерны и приемы. Просто вбейте в поисковике React patterns . Так же хорошо знать что такое принципы SOLID, DRY и прочее.

Можно использовать react-bootstrap.github.io

Как альтернатива, отказ от БЭМ и переход на css in js.
Сам в работе использую и рекомендую Styled Components

{radios.map(radio => (
  <Radio
    key={radio.value}
    enabled={radio.value === this.state.value} 
  >
    {radio.label}
  </Radio>
))}

Активный элемент не обязательно хранится в state, может приходить и в props

Зачем делать двойную работу? Пишите сразу.

Ajax запросом ссылка приходит, после загрузки страницы.

Вы пытаетесь отрендерить объект состояния и ловите исключение.
У вас в свойство count передается объект:

{
  counterReducer: 0,
}

Исправьте mapSateToProps на:

function mapStateToProps(state) {
    return {
        count: state.counterReducer,
    };
}

или:

const mapStateToProps = state => ({
  count: state.counterReducer,
});

https://foundation.zurb.com/emails.html
https://foundation.zurb.com/emails/email-templates.html