Just Need Explanation on "this.removeAuthListener"

[davidfufu]

Hi There, just want to say that I love your guides, and I think they're more well explained and paced than most out there. I just had a question about the componentWIllMount() Code in App.js.

      this.removeAuthListener = app.auth().onAuthStateChanged((user) => {

I actually understand that it's a listener that listens for changes in authentication state. What I'm confused is how you're assigning to a ref and calling it later? I though that functions inside a component had to be bound in the constructor like "this.function.bind(this)", Could you refer me to reference for documentation for this?

  componentWillUnmount() {
  	console.log("Yo unmounting");
  	this.removeAuthListener();
    base.removeBinding(this.songsRef);
  }

And in the componentWillUnmount hook, you can call the function again, but the function was created or initiated in a "componentWillMount". Does that carry into the global scope of the entire component?

[ThorstenBruening]

Hi, David!

React's lifecycle methods exist only on React classes,
and they are always "invoked" in this specific order:
a) constructor
b) componentWillMount
c) render
d) componentDidMount
e) componentWillUnmount

Furthermore, their "this" is always in the context of their surrounding class, so,
you can assign - without worrying about "this" and "binding" - any content to this.everything,
and be sure that it will be present in the class AND the other mentioned
lifecycle methods as well.

app.auth().onAuthStateChanged((user) => { callBack-function } itself just hooks
a function which is called on auth change, however, (internally) as well sets up a listener and returns it,
which you may save whereever you want, in case you want later to get rid of the listener, to clean up after you or your component after it's unmounting.

Here, in the chords example, the variable name was chosen quite 'unlucky'.
If it just was called "listenerRef", the intention
would have become more clear, at least when "listenerRef" was called in componentWillUnmount.

Well, when you look at the binding of the re-base stuff, it's all the same, too.
Whenever you bind the base to a database-ref, you safe the binding (song-) ref to a variable, and later on unmount call base.removeBinding(this.songsRef) on this specific ref, or just call base.removeBinding() to get rid of all refs, or you trust re-base to kill all refs on component unmount itself (, which you surely can after V >= V3).

I hope I could help with this.
TB

PS: I suggest, you always bootstrap your projects with create-react-app, because you never again have to worry about webpack, and all the es5/es6/es7 stuff.
It handles all this for you.

As well, and that is the point, you can use es7 property initializer syntax when setting up handlers and get rid of all the binding handlers at all.

old/outdated:
handleXYZ() { //must bind in onABC(handleXYZ.bind(this) or in constructor
bla;
bla;
}

up2Date:
handleXYZ = ( ) => {
bla;
bla;
bla;
}
It works well, trust me ;-)

[keiththomps]

Thanks for answering this Thorsten. This fell through the cracks unfortunately, but there’s nothing that I can add to your response.

…

On Dec 10, 2017, 12:30 PM -0500, Thorsten Brüning ***@***.***>, wrote: Hi, David! React's lifecycle methods exist only on React classes, and they are always "invoked" in this specific order: a) constructor b) componentWillMount c) render d) componentDidMount e) componentWillUnmount Furthermore, their "this" is always in the context of their surrounding class, so, you can assign - without worrying about "this" and "binding" - any content to this.everything, and be sure that it will be present in the class AND the other mentioned lifecycle methods as well. app.auth().onAuthStateChanged((user) => { callBack-function } itself just hooks a function which is called on auth change, however, (internally) as well sets up a listener and returns it, which you may save whereever you want, in case you want later to get rid of the listener, to clean up after you or your component after it's unmounting. Here, in the chords example, the variable name was chosen quite 'unlucky'. If it just was called "listenerRef", the intention would have become more clear, at least when "listenerRef" was called in componentWillUnmount. Well, when you look at the binding of the re-base stuff, it's all the same, too. Whenever you bind the base to a database-ref, you safe the binding (song-) ref to a variable, and later on unmount call base.removeBinding(this.songsRef) on this specific ref, or just call base.removeBinding() to get rid of all refs, or you trust re-base to kill all refs on component unmount itself (, which you surely can after V >= V3). I hope I could help with this. TB PS: I suggest, you always bootstrap your projects with create-react-app, because you never again have to worry about webpack, and all the es5/es6/es7 stuff. It handles all this for you. As well, and that is the point, you can use es7 property initializer syntax when setting up handlers and get rid of all the binding handlers at all. old/outdated: handleXYZ() { //must bind in onABC(handleXYZ.bind(this) or in constructor bla; bla; } up2Date: handleXYZ = ( ) => { bla; bla; bla; } It works well, trust me ;-) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.