Use state rather than forceUpdate

src/components/views/rooms/AuxPanel.js

@@ -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.setState({counters: this._computeCounters()})
-        this.forceUpdate();
     }, 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")) {
+        if (this.state.counters && SettingsStore.isFeatureEnabled("feature_state_counters")) {
-            const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
-
             let counters = [];
 
-            stateEvs.forEach((ev, idx) => {
+            this.state.counters.forEach((counter, idx) => {
-                const title = ev.getContent().title;
+                const title = counter.title;
-                const value = ev.getContent().value;
+                const value = counter.value;
-                const link = ev.getContent().link;
+                const link = counter.link;
-                const severity = ev.getContent().severity || "normal";
+                const severity = counter.severity;
-                const stateKey = ev.getStateKey();
+                const stateKey = counter.stateKey;
 
                 if (title && value && severity) {
                     let span = <span>{ title }: { value }</span>