class App extends Component{ constructor(){ super() this.state = { currentuser : null }} unsubfromAuth = null componentDidMount(){ this.unsubfromAuth = auth.onAuthStateChanged((user) => { this.setState({currentuser : user}) console.log(user) }) } componentWillUnmount() { this.unsubfromAuth() } render(){ return ( <div className="App"> <Router> <Header currentUser={this.state.currentuser}/> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/Hats" component={Hats}/> <Route exact path="/shoes" component={Shoes}/> <Route exact path="/jackets" component={Jacket}/> <Route exact path="/men" component={Men}/> <Route exact path="/women" component={Women}/> <Route exact path="/shop" component={Shop}/> <Route exact path="/signin" component={Signin}/> </Switch> </Router> </div> ) }} export default App¿Por qué se usa en ComponentWillUnmount? Escuché algo sobre la fuga de memoria, ¿lo previene? ¿Por qué se cambió en ComponentDidMount? Estoy usando firebase en Reactjs.
Este es el flujo estándar en un ciclo de vida de React Component, cuando tiene que suscribirse a algún evento. Esta es solo la inicialización de la variable de instancia, se ejecuta tan pronto como se monta el Componente:
unsubfromAuth = null Aquí es donde se suscribe efectivamente a su evento ("auth-state-changed") y comienza a escucharlo, siempre desea suscribirse a eventos como este en componentDidMount o useEffect si usa ganchos, ya que esto se ejecuta cuando el Componente ha montado completamente.
El método auth.onAuthStateChanged() devuelve una función que borra automáticamente cualquier suscripción cuando se le llama.
componentDidMount(){ this.unsubfromAuth = auth.onAuthStateChanged((user) => { this.setState({currentuser : user}) console.log(user) }) }El método de cancelación de suscripción se llamará en:
componentWillUnmount() { this.unsubfromAuth() }Esto se ejecutará justo antes de que el componente se desmonte para borrar la suscripción, ya que no desea que los detectores de eventos y las suscripciones sigan en la memoria cuando se desmonte, o terminará con pérdidas de memoria si su componente se monta. y se desmonta muchas veces.