Firebase инициализирует неоднократно ReactJS

Question

Каждый раз, когда я загружаю страницу или маршрут в любое место, вызывается firebase.initializeApp (). Первый console.log в этом блоке if требует firebase.apps: [], а второй - фактический заполненный объект, и я не знаю, почему содержимое firebase.apps пусто при каждом вызове InitFirebase.js, или почему это называется несколько раз в первую очередь.

Первоначально он был в файле с остальными моими методами аутентификации, и я думал, что он вызывает остальную часть файла всякий раз, когда я вызываю статический метод, но даже когда я разделяю его на свой собственный файл, он по-прежнему вызывает каждый раз, когда я загружаю страницу, перезагружаю страницу или направляю к другому маршруту на странице.

Все, что я нашел в Интернете, говорит, что множественные вызовы firebase.initializeApp() могут быть решены с помощью if(!firebase.apps.length), но, похоже, здесь это не работает. Есть ли какое-то взаимодействие с импортом или реакция, что я здесь отсутствует Как я могу это исправить?

App.js

import React, { Component } from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import './App.css';
import * as InitFirebase from './auth/InitFirebase';
import Register from './auth/Register';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route exact path="/register" component={Register}/>
          </Switch>
        </div>
      </BrowserRouter>

    );
  }
}

export default App;

InitFirebase.js

import firebase from 'firebase';

var config = {
    //Private Info
};
if (!firebase.apps.length) {
    console.log("firebase apps before:", firebase.apps);
    firebase.initializeApp(config);
    console.log("firebase apps after:", firebase.apps);
}