Improve performance of the map by using Pure Components

src/components/App.js

@@ -35,7 +35,7 @@ export type AppState = {
   mqttConnected: boolean,
 };
 
-class App extends React.Component<AppProps & Classes, AppState> {
+class App extends React.PureComponent<AppProps & Classes, AppState> {
   constructor(props: AppProps & Classes) {
     super(props);
     this.state = {
@@ -89,11 +89,11 @@ class App extends React.Component<AppProps & Classes, AppState> {
       const topic = topics[i];
       const parseValue = this.topics[topic].type;
       const val = parseValue == null ? message.toString() : parseValue(message);
-      this.setState({mqttState: merge(this.state.mqttState,
+      this.setState({mqttState: Object.assign({}, merge(this.state.mqttState,
         { [topic]: {
           actual: val,
           internal: keyOf(this.topics[topic].values, val) || val
-        }})});
+        }}))});
     }
   }
 

src/components/ControlMap.js

@@ -22,7 +22,7 @@ export type ControlMapProps = {
   state: State
 };
 
-export default class ControlMap extends React.Component<ControlMapProps> {
+export default class ControlMap extends React.PureComponent<ControlMapProps> {
   constructor(props: ControlMapProps) {
     super(props);
   }

src/components/SideBar.js

@@ -23,7 +23,7 @@ export type SideBarProps = {
 export type SideBarState = {
 };
 
-class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
+class SideBar extends React.PureComponent<SideBarProps & Classes, SideBarState> {
   constructor(props: SideBarProps & Classes) {
     super(props);
   }

src/components/TopBar.js

@@ -15,7 +15,7 @@ export type TopBarState = {
 
 };
 
-export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+export default class TopBar extends React.PureComponent<TopBarProps, TopBarState> {
   constructor(props: TopBarProps) {
     super(props);
   }

src/components/UiItemList/UiItem.js

@@ -30,7 +30,7 @@ type UiItemProps<I> = {
 };
 
 // eslint-disable-next-line flowtype/no-weak-types
-export default class UiItem<I:Object> extends React.Component<UiItemProps<I>> {
+export default class UiItem<I:Object> extends React.PureComponent<UiItemProps<I>> {
   constructor(props: UiItemProps<I>) {
     super(props);
   }
@@ -236,7 +236,7 @@ export class Progress extends UiControl<UIProgress> {
     return [
       <ListItemText key="label" secondary={this.props.item.text} />,
       <div style={{ flex: "10 1 auto" }} key="progressbar">
-        <LinearProgress mode="determinate" value={value} />
+        <LinearProgress variant="determinate" value={value} />
       </div>
     ];
   }

src/components/UiItemList/index.js

@@ -22,7 +22,7 @@ export type UiItemListProps = {
   onChangeState: (topic: string, nextState: Actual) => void
 };
 
-export default class UiItemList extends React.Component<UiItemListProps> {
+export default class UiItemList extends React.PureComponent<UiItemListProps> {
   constructor(props: UiItemListProps) {
     super(props);
   }