Replacing 'componentWillReceiveProps' with 'getDerivedStateFromProps'

App.js

import React, {PureComponent} from "react";
import DisplayStat from "./displayStat.js"

class App extends PureComponent{
  constructor(){
    super();
    this.state={
      path : "path-1"
    }
  }
  
  changePath=()=>{
    this.setState({path: "path-2"});
  }
  
  render(){
    return(
      <div>
        <DisplayStat path={this.state.path} />
        <div onClick={this.changePath} >Change Path</div>
      </div>
    )
  }
}

displayStat.js

import React, {PureComponent} from "react";

class DisplayStat extends PureComponent{
  constructor(props){
    super();
    this.state={
      firebaseRef: firebase.database().ref(this.props.path);
    }
  }
  componentDidMount() {
    this.getData(this.state.firebaseRef);
  }
  
  componentWillReceiveProps(nextProps){
    if(nextProps.path!==this.props.path){
      let {firebaseRef}=this.state;
      
      firebaseRef.off("value"); //Turn off the connection to previous path.
      
      firebaseRef=firebase.database().ref(nextProps.path);
      this.setState({firebaseRef, path :nextProps.path });
      this.getData(firebaseRef);
    }
  }

  getData=(ref)=>{
    // open connection and listen to firebase path
    ref.on("value", snapshot => {
      //Perform some operation
    });
  }
  
  render(){
    return(
      <div>
        //Display Stats
      </div>
    );
  }
}