Почему моя база данных Firebase на максимальной мощности блокирует пользовательский интерфейс моего приложения?

Question

У меня есть приложение React, которое прослушивает события Firebase.Он ничего не записывает в базу данных, он просто обновляет состояние с помощью .on('value', ...) прослушивателя веб-сокетов.

Этим утром мой бесплатный план "Spark" был заполнен количеством соединений.Все мои тестовые пользователи заметили, что пользовательский интерфейс завис.Это случалось много раз в других случаях, когда в базе данных много работы.Замораживание происходит после того, как приложения уже установили первое соединение - пользовательский интерфейс замедляется и зависает по мере увеличения скорости активности.

Я понимаю, почему я не получил бы никаких новых данных, если бы у меня было максимальное количество подключений,но я не понимаю, почему пользовательский интерфейс зависает.Разве прослушиватель on просто не должен вызываться?

Понимание этого, вероятно, также решит другие проблемы, которые у меня есть (например, пользовательский интерфейс не обновляется, пока все refs не вернут данные, даже если некоторые возвращаются раньшеи следует обновить приложение раньше).

Вот моя основная структура приложения:

export default class App extends Component {

  [...]

  componentWillMount() {
    // I have an array of around 30 refs to listen to
    myFirebaseReferences.each(refId, => {
      firebase.database().ref(refId)
          .orderByKey()
          .on('value', (snapshot) => {
            const fbState = snapshot.val() || {};
            this.setState({[refId]: fbState});
          });
    });
  }
}