Loading data from Firebase

As we described earlier, we can listen for changes to a particular reference in our database. In other words, we can define a function to run every time firebase.database().ref(‘/messages’) changes, as a new message comes in.

Before we move on, I'd encourage you to consider two things: where we should define this listener, and what the function should do.

See if you can come up with a possible implementation! After you've brainstormed an idea, let's build it.

Here's the thing: we already have a very similar case in our application. Our firebase.auth().onAuthStateChanged in our App#componentDidMount listens for changes in our current user, and updates the state.user of our App.

We will do the exact same thing with our messages reference, though the syntax is a bit different:

class App extends Component {
  state = { user: null, messages: [] }

  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ user...