message: Use state rather than forceUpdate
diff: @@ -62,6 +62,10 @@ module.exports = React.createClass({
  hideAppsDrawer: false,
  },
  + getInitialState: function() {
  + return { counters: this._computeCounters() };
  + },
  +
  componentDidMount: function() {
  const cli = MatrixClientPeg.get();
  cli.on("RoomState.events", this._rateLimitedUpdate);
  @@ -97,10 +101,40 @@ module.exports = React.createClass({
  },
  _rateLimitedUpdate: new RateLimitedFunc(function() {
  - /* eslint-disable babel/no-invalid-this */
  - this.forceUpdate();
  + this.setState({counters: this._computeCounters()})
  }, 500),
  + _computeCounters: function() {
  + let counters = [];
  +
  + if (this.props.room && SettingsStore.isFeatureEnabled("feature_state_counters")) {
  + const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
  + stateEvs.sort((a, b) => {
  + return a.getStateKey() < b.getStateKey();
  + });
  +
  + stateEvs.forEach((ev, idx) => {
  + const title = ev.getContent().title;
  + const value = ev.getContent().value;
  + const link = ev.getContent().link;
  + const severity = ev.getContent().severity || "normal";
  + const stateKey = ev.getStateKey();
  +
  + if (title && value && severity) {
  + counters.push({
  + "title": title,
  + "value": value,
  + "link": link,
  + "severity": severity,
  + "stateKey": stateKey
  + })
  + }
  + });
  + }
  +
  + return counters;
  + },
  +
  render: function() {
  const CallView = sdk.getComponent("voip.CallView");
  const TintableSvg = sdk.getComponent("elements.TintableSvg");
  @@ -165,17 +199,15 @@ module.exports = React.createClass({
  />;
  let stateViews = null;
  - if (this.props.room && SettingsStore.isFeatureEnabled("feature_state_counters")) {
  - const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
  -
  + if (this.state.counters && SettingsStore.isFeatureEnabled("feature_state_counters")) {
  let counters = [];
  - stateEvs.forEach((ev, idx) => {
  - const title = ev.getContent().title;
  - const value = ev.getContent().value;
  - const link = ev.getContent().link;
  - const severity = ev.getContent().severity || "normal";
  - const stateKey = ev.getStateKey();
  + this.state.counters.forEach((counter, idx) => {
  + const title = counter.title;
  + const value = counter.value;
  + const link = counter.link;
  + const severity = counter.severity;
  + const stateKey = counter.stateKey;
  if (title && value && severity) {
  let span = <span>{ title }: { value }</span>
  