Improve render speed

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -10,17 +10,7 @@ import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
-import {
+import { Button, Grid, IconButton, TextField, List, ListItem, ListItemText, Tooltip } from '@material-ui/core'
-  Button,
-  Grid,
-  IconButton,
-  TextField,
-  List,
-  ListItem,
-  ListItemText,
-  Tooltip,
-  Typography,
-} from '@material-ui/core'
 
 interface Props {
   connection: ConnectionOptions

app/src/components/ConnectionSetup/Certificates.tsx

@@ -18,7 +18,7 @@ interface State {
   subscription: string
 }
 
-class Certificates extends React.Component<Props, State> {
+class Certificates extends React.PureComponent<Props, State> {
   constructor(props: any) {
     super(props)
     this.state = { subscription: '' }

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -20,7 +20,7 @@ interface Props {
   showCertificateSettings: boolean
 }
 
-class ConnectionSetup extends React.Component<Props, {}> {
+class ConnectionSetup extends React.PureComponent<Props, {}> {
   constructor(props: Props) {
     super(props)
   }

app/src/components/ErrorBoundary.tsx

@@ -14,7 +14,7 @@ interface Props {
   classes: any
 }
 
-class ErrorBoundary extends React.Component<Props, State> {
+class ErrorBoundary extends React.PureComponent<Props, State> {
   public static getDerivedStateFromError(error: Error) {
     return { error }
   }

app/src/components/Layout/Notification.tsx

@@ -11,7 +11,7 @@ interface Props {
   classes: any
 }
 
-class Notification extends React.Component<Props, {}> {
+class Notification extends React.PureComponent<Props, {}> {
   constructor(props: Props) {
     super(props)
   }

app/src/components/Layout/PauseButton.tsx

@@ -28,7 +28,7 @@ interface Props {
   tree?: q.Tree<any>
 }
 
-class PauseButton extends React.Component<Props, { changes: number }> {
+class PauseButton extends React.PureComponent<Props, { changes: number }> {
   private timer?: any
   constructor(props: Props) {
     super(props)

app/src/components/Layout/TitleBar.tsx

@@ -46,7 +46,7 @@ interface Props {
   topicFilter?: string
 }
 
-class TitleBar extends React.Component<Props, {}> {
+class TitleBar extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
     this.state = {}

app/src/components/SettingsDrawer/Settings.tsx

@@ -90,7 +90,7 @@ interface Props {
   theme: 'light' | 'dark'
 }
 
-class Settings extends React.Component<Props, {}> {
+class Settings extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
     this.state = {}

app/src/components/Sidebar/CodeDiff/index.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 interface State {}
 
-class CodeDiff extends React.Component<Props, State> {
+class CodeDiff extends React.PureComponent<Props, State> {
   private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre ~ pre' })
 
   constructor(props: Props) {

app/src/components/Sidebar/TopicPanel/Topic.tsx

@@ -24,7 +24,7 @@ const styles = (theme: Theme) => ({
   },
 })
 
-class Topic extends React.Component<Props, {}> {
+class Topic extends React.PureComponent<Props, {}> {
   public render() {
     const { node, theme } = this.props
     if (!node) {

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -41,7 +41,7 @@ interface Props {
 
 interface State {}
 
-class ValuePanel extends React.Component<Props, State> {
+class ValuePanel extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = {}

app/src/components/TopicPlot.tsx

@@ -42,7 +42,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
         json = message.value ? JSON.parse(Base64Message.toUnicodeString(message.value)) : {}
       } catch (ignore) {}
 
-      let value = dotProp.get(json, dotPath)
+      const value = dotProp.get(json, dotPath)
 
       return { x: message.received.getTime(), y: toPlottableValue(value) }
     })

app/src/components/UpdateNotifier.tsx

@@ -45,7 +45,7 @@ interface State {
   newerVersions: Array<GithubRelease>
 }
 
-class UpdateNotifier extends React.Component<Props, State> {
+class UpdateNotifier extends React.PureComponent<Props, State> {
   constructor(props: any) {
     super(props)
     this.state = { newerVersions: [] }

app/src/components/helper/ConnectionHealthIndicator.tsx

@@ -37,7 +37,7 @@ interface Props {
   withBackground?: boolean
 }
 
-class ConnectionHealthIndicator extends React.Component<Props, {}> {
+class ConnectionHealthIndicator extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
   }

app/src/components/helper/Copy.tsx

@@ -19,7 +19,7 @@ interface State {
   didCopy: boolean
 }
 
-class Copy extends React.Component<Props, State> {
+class Copy extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = { didCopy: false }

app/src/components/helper/CustomIconButton.tsx

@@ -21,7 +21,7 @@ const styles = (theme: Theme) => ({
   },
 })
 
-class CustomIconButton extends React.Component<Props, {}> {
+class CustomIconButton extends React.PureComponent<Props, {}> {
   constructor(props: Props) {
     super(props)
   }

app/src/components/helper/DateFormatter.tsx

@@ -16,7 +16,7 @@ const unitMapping = {
   h: 'hours',
 }
 
-class DateFormatter extends React.Component<Props, {}> {
+class DateFormatter extends React.PureComponent<Props, {}> {
   private intervalSince(intervalSince: Date) {
     const interval = intervalSince.getTime() - this.props.date.getTime()
     const unit = this.unitForInterval(interval)