title: How to update Firebase data to the React application in realtime
body: <p>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.</p>
  
  <p>I have built it done but it continually renders <code>renderStatus()</code> and it's too slow. I want to make it updated once RDB data updated.</p>
  
  <pre><code>class Status extends Component {
    constructor(props) {
      super(props);
      this.state = {
        to_status: false,
        from_status: false
      };
    }
  
    // change the state in RDB
    handleSatus = () =&gt; {
      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 (
            &lt;p&gt;Updated&lt;/p&gt;
          );
        } else {
          return (
            &lt;p&gt;Not updated yet&lt;/p&gt;
          );
        }
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.renderStatus()}
          &lt;button onClick={this.handleStatus()}&gt;Click!&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>