FirebaseでReactのstateをリアルタイムで反映したい

Question

いつもお世話になっております。

Firebaseと、Reactを使ってリアルタイムで更新されるアプリケーションを開発しています。
具体的に実現したいことは、同じページを2人がみているとして、1人がStateを更新すれば、もう1人側がみているStateもリアルタイムで更新されるような仕様を実現したいと考えています。

下記のコードで実装しているのですが、実際に1人がStateを更新した際にもう1人がみているStateもリアルタイムに更新するのですが、ここだとなぜか断続的にrenderStatusがまわり続けてしまい、かなり重くなってしまいます。

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

  // ここでRDBのstatusを変更する
  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;

    // ここでRDBのstatusを取得する
    let self = this;
    firebase
      .database()
      .ref("/busy/" + posy.uid)
      .once("value")
      .then(function(snapshot) {
        self.setState({ from_status: snapshot.val().status });
      });

      if (this.state.from_status) {
        return (
          <p>変更されました</p>
        );
      } else {
        return (
          <p>変更されていません</p>
        );
      }
  }

  render() {
    return (
      <div>
        {this.renderStatus()}
        <button onClick={this.handleStatus()}>クリック</button>
      </div>
    )
  }

変更された時だけrenderStatus()を更新するような良いやり方はないでしょうか？
お知恵を拝借させていただけますと幸いです。

Comments

[og24715]

renderPost がサンプルコードに出現しないのですが firebase の api かなにかでしょうか。

[yamady]

失礼いたしました。renderStatusの間違いでした。
大変申し訳ございません。

Answer 1

renderStatus 内の下のコードは Post コンポーネントが描画される度に実行されるので、 state が更新がされ再描画、renderStatus の実行、 state の更新…と無限ループするリスクがあります。適切な条件でのみ setState が実行されることを確認してください。

firebase
  .database()
  .ref("/busy/" + posy.uid)
  .once("value")
  .then(function(snapshot) {
    self.setState({ from_status: snapshot.val().status });
  });

Comments

[yamady]

ありがとうございます！
また、`.on()`をつかうことで実現できました！