Q:

React. Проблема со state

Недавно изучаю реакт, столкнулся со следующей проблемой:
Проект - сайт с фильмами с возможностью поиска по названию и по тегам. 
У меня есть 4 компонента:
1. App который является родителем;
2. SearcBlock - компонент включающий в себя поле поиска и компонент Tags;
3. Компонент Tags, который содержит список тегов с категориями фильмов, которые можно использовать при поиске посредством клика;
4. Компонент FilmsList, который отображает список фильмов, целиком, или соответствующих поисковому запросу;
Проблема в том, что при первом клике на тег, state в SearchBlock обновляется с опозданием и перендеринг происходит только со второй попытки.
Более того, столкнулся с ещё одной странностью - если выбрать несколько активных тегов, а потом снять с них метку, то state снова не обновится при выборе одного тега и поиск начнет работать только со второй попытки.
Код можно посмотреть здесь: https://codesandbox.io/s/films-kwmmd
Кто нибудь может объяснить мне, как решить эту проблему? Заранее спасибо

A:

Во-первых: переходите на хуки, с классами работают только мазохисты.
С классами особо не работал, но подозреваю что проблема тут (могу ошибаться):
updateActiveTags = activeTags => {
    this.setState({
      activeTags
    });
    this.filterFilms();
  };

Вы запускаете фильтр до того, как обновляется state activeTags (обе функции проходят в одном рендере).
Решение для проверки простое:
  updateActiveTags = activeTags => {
    this.setState({
      activeTags
    });
    this.filterFilms(activeTags);
  };

