Progressive Web Apps with React

Event listeners

Event listeners in JavaScript essentially work like so: we define an event and a callback we want to run when that event occurs. We can thus declare a function early on in our code, and only have it triggered later, whenever the specified event occurs.

Here's an example of listening for a resize of the browser window:

window.addEventListener('resize', function() { // Do something about resize });

Firebase provides us with a function called firebase.auth().onAuthStateChanged. This function takes a callback as an argument, which is then called with the user object; it's perfect for our purposes!

The challenge, however, is when to declare this function in our App component. We want it to do the following:

firebase.auth().onAuthStateChanged((user) ...