When your component first mounts, it calls ComponentDidMount and initializes the peopleArray . This is only done once and thus this array is being mutated every time you receive updates from Firebase. With your current implementation, you are mutating the state as the reference to peopleArray is being held in state as a pointer, and not by value. React does not do deep comparisons when it checks to see if something has changed in the state tree, it does object comparisons. This is why you never want to mutate your state, always create new objects when setting state. This goes for redux as well.

A super quick fix would be to move the line let peopleArray = [] into the firebase onValue handler, so that a new array is created every time you get an update. Also, with the current implementation you are going to keep appending your Firebase values onto the same array, so you may get duplicates. The fix I mentioned will take care of that as well.

Here is your final CDM: