Reactjs 为什么添加了React与Firebase在child_上多次渲染的组合

我想与React（hooks）和Firebase一起创建一个漂亮的仪表板。但是我想知道为什么在类组件中多次调用添加的

或
值的
.on
子对象。代码（index.js）：

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
进口{
BrowserRouter作为路由器，
转换
路线,，
用路由器，
}从“反应路由器dom”；
从“道具类型”导入道具类型；
从“redux”导入{createStore}；
从'react redux'导入{Provider，connect}；
从'redux devtools extension'导入{composeWithDevTools}；
导入“/components/App.css”；
从“./components/App”导入应用程序；
从“./components/Auth/Login”导入登录名；
从“./components/Auth/Register”导入寄存器；
从“./components/Spinner/Spinner”导入微调器；
从“./registerServiceWorker”导入registerServiceWorker；
从“/firebase”导入firebase，{userlistner}；
导入“语义ui css/semantic.min.css”；
从“./reducers”导入rootReducer；
从“/actions”导入{setUser}；
const store=createStore（rootReducer，composeWithDevTools（））；
/**
*项目的默认路由
*/
const Root=props=>{
const{history，setUser，isLoading}=props；
const[check，setCheck]=useState（false）；
useffect（（）=>{
如果（！检查）{
firebaseCheck（）；
}
}),
[核对]；
/**
*检查用户是否已授权
*/
常量firebaseCheck=（）=>{
firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
setUser（用户）；
历史推送（“/”）；
}否则{
history.push（'/login'）；
}
设置检查（真）；
});
};
如果（检查）{
if（firebase.auth（）.currentUser）{
userlistner.child（firebase.auth（）.currentUser.uid）.on（'value'，snap=>
{
log（'before'，snap.val（））；
});
userlistner.off（）；
}
}
/**
*项目的默认路由渲染
*/
回来！检查(
) : (
} />
);
};
/**
*将状态映射到道具
*/
常量mapStateToProps=状态=>({
isLoading:state.user.isLoading，
});
const RootWithAuth=withRouter(
连接(
MapStateTops，
{setUser}
)（根）
);
Root.propTypes={
/**要渲染的文本*/
历史记录：PropTypes.oneOfType（[PropTypes.string，PropTypes.object]），
isLoading:PropTypes.bool，
};
Root.defaultProps={
历史记录：空，
isLoading:null，
};
ReactDOM.render(
,
document.getElementById（'root'））
);
registerServiceWorker（）；

由于某些原因，console.log会被触发三次，无法找出发生这种情况的原因。我在这里实现Firebase是错误的还是有反应？
是否将侦听器正确地连接到组件的主体中？我猜它订阅了每个重新渲染的历史道具，导致重新渲染它是正常的，我的意思是
userlistner.child…
也应该被提取到useffect。渲染不应包含任何副作用，除了在钩子中。是否将侦听器直接附加到组件的主体中？我猜它订阅了每个重新渲染的历史道具，导致重新渲染它是正常的，我的意思是
userlistner.child…
也应该被提取到useffect。渲染不应包含任何副作用，挂钩除外
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  withRouter,
} from 'react-router-dom';
import PropTypes from 'prop-types';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import './components/App.css';
import App from './components/App';
import Login from './components/Auth/Login';
import Register from './components/Auth/Register';
import Spinner from './components/Spinner/Spinner';
import registerServiceWorker from './registerServiceWorker';
import firebase, { userListListner } from './firebase';

import 'semantic-ui-css/semantic.min.css';
import rootReducer from './reducers';
import { setUser } from './actions';

const store = createStore(rootReducer, composeWithDevTools());
  /**
   * Default routing for project
  */
 const Root = props => {
 const { history, setUser, isLoading } = props;
 const [check, setCheck] = useState(false);

 useEffect(() => {
  if (!check) {
    firebaseCheck();
  }
 }),
  [check];

 /**
  * Check if user is authorised
  */
 const firebaseCheck = () => {
   firebase.auth().onAuthStateChanged(user => {
     if (user) {
       setUser(user);
       history.push('/');
     } else {
       history.push('/login');
    }
     setCheck(true);
   });
 };

 if (check) {
   if (firebase.auth().currentUser) {

     userListListner.child(firebase.auth().currentUser.uid).on('value', snap => 
     {
        console.log('before', snap.val());
     });
     userListListner.off();
   }
 }

  /**
   * Default rout rendering for project
   */
  return !check ? (
    <Spinner />
  ) : (
    <Switch>
      <Route exact path="/" render={() => <App />} />
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
    </Switch>
  );
};

/**
 * map state to props
 */
const mapStateToProps = state => ({
  isLoading: state.user.isLoading,
});

const RootWithAuth = withRouter(
  connect(
    mapStateToProps,
    { setUser }
  )(Root)
);

Root.propTypes = {
  /** Text to render */
  history: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  isLoading: PropTypes.bool,
};

Root.defaultProps = {
  history: null,
  isLoading: null,
};

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <RootWithAuth />
    </Router>
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();