Use Throttling

src/components/App.js

@@ -5,6 +5,7 @@ import mapValues from "lodash/mapValues";
 import filter from "lodash/filter";
 import keys from "lodash/keys";
 import merge from "lodash/merge";
+import throttle from "lodash/throttle";
 
 import type { Config, Control, Topics } from "config/flowtypes";
 
@@ -94,14 +95,17 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         const stateTopic = this.topics[topic].state;
         const parseVal = stateTopic ? stateTopic.type : null;
         const val = parseVal == null ? message.toString() : parseVal(message);
-        this.setState({mqttState: Object.assign({}, merge(this.state.mqttState,
-          { [topic]: val}))});
+        this.setMqttStateDebounced(
+          {mqttState: Object.assign({},
+            merge(this.state.mqttState, { [topic]: val}))});
       }
     } catch (err) {
       this.setState({ error: err.toString() });
     }
   }
 
+  setMqttStateDebounced = throttle(this.setState, 32);
+
   changeControl(control: ?Control = null) {
     this.setState({selectedControl: control, drawerOpened: control != null});
   }

src/components/ControlMap.js

@@ -67,10 +67,9 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
 
   renderMarker(control: Control, key: string) {
     return (
-      <MqttContext.Consumer>
+      <MqttContext.Consumer key={key}>
         {({ state }) => (
           <Marker position={convertPoint(control.position)}
-            key={key}
             icon={this.createLeafletIcon(control, state)}
             onClick={() => this.props.onChangeControl(control)}
           >

src/components/UiItemList/UiItem.js

@@ -2,7 +2,7 @@
 import React from "react";
 import keys from "lodash/keys";
 import map from "lodash/map";
-import debounce from "lodash/debounce";
+import throttle from "lodash/throttle";
 import { renderRawIcon } from "config/icon";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import ListItemText from "@material-ui/core/ListItemText";
@@ -76,7 +76,7 @@ export class UiControl<I: UIControl> extends UiItem<I> {
     this.debouncedChange(next);
   }
 
-  debouncedChange = debounce((next: string) =>
+  debouncedChange = throttle((next: string) =>
     this.props.onChangeState(this.props.item.topic, next), 50, {
     leading: true,
     trailing: true

src/components/UiItemList/index.js

@@ -27,6 +27,13 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
           "A control is missing the \"type\" parameter"
         );
       }
+      if (control.type === "section") {
+        return(
+          <MqttContext.Consumer>
+            {this.renderListItem(control, key)}
+          </MqttContext.Consumer>
+        );
+      }
       return (
         <ListItem key={key}>
           <MqttContext.Consumer>
@@ -40,8 +47,7 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
   renderListItem(control: ControlUI, key: number) {
     return (mqtt: MqttContextValue) => {
       const node = this.renderControl(control, key.toString(), mqtt);
-      if (control.icon == null || control.type === "link"
-        || control.type === "section") {
+      if (control.icon == null || control.type === "link") {
         return node;
       } else {
         const listIconNode = (