How to update Firebase data to the React application in realtime

Question

I'm developing an application that updates Firebase data in realtime to React. What I want to do is that a user updates the state in the app, at the same time it should be updated for another user.

I have built it done but it continually renders renderStatus() and it's too slow. I want to make it updated once RDB data updated.

class Status extends Component {
  constructor(props) {
    super(props);
    this.state = {
      to_status: false,
      from_status: false
    };
  }

  // change the state in RDB
  handleSatus = () => {
    const { post } = this.props;
    firebase
      .database()
      .ref("/busy/" + post.uid)
      .set({
        status: true,
        last_changed: firebase.database.ServerValue.TIMESTAMP
      });
    this.setState({ to_status: true });
  };

  renderStatus() {
    const { post } = this.props;
    const { to_status, from_status } = this.state;

    // fetch the data in RDB
    let self = this;
    firebase
      .database()
      .ref("/busy/" + post.uid)
      .once("value")
      .then(function(snapshot) {
        self.setState({ from_status: snapshot.val().status });
      });

      if (this.state.from_status) {
        return (
          <p>Updated</p>
        );
      } else {
        return (
          <p>Not updated yet</p>
        );
      }
  }

  render() {
    return (
      <div>
        {this.renderStatus()}
        <button onClick={this.handleStatus()}>Click!</button>
      </div>
    )
  }

Answer 1

You'll typically want to:

1. Register an on() listener in your componentDidMount() method.
2. Call setState with the relevant data from the database, when that initially loads and when it changes.
3. Let react handle the rendering from the state as usual.

So something like:

componentDidMount() {
  firebase
    .database()
    .ref("/busy/" + posy.uid)
    .on("value")
    .then((snapshot) => {
      this.setState({ from_status: snapshot.val().status });
    });
}
render() {
  return (
    <div>
      <p>{this.state.from_status?"Updated":"Not updated yet"}</p>
      <button onClick={this.handleStatus()}>Click!</button>
    </div>
  )
}