From c1e2a4c6258780eeab2b722007c3f364a5fe5f09 Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Mon, 8 Jul 2019 17:17:46 +0200 Subject: [PATCH] Improve render speed --- .../ConnectionSetup/AdvancedConnectionSettings.tsx | 12 +----------- app/src/components/ConnectionSetup/Certificates.tsx | 2 +- .../components/ConnectionSetup/ConnectionSetup.tsx | 2 +- app/src/components/ErrorBoundary.tsx | 2 +- app/src/components/Layout/Notification.tsx | 2 +- app/src/components/Layout/PauseButton.tsx | 2 +- app/src/components/Layout/TitleBar.tsx | 2 +- app/src/components/SettingsDrawer/Settings.tsx | 2 +- app/src/components/Sidebar/CodeDiff/index.tsx | 2 +- app/src/components/Sidebar/TopicPanel/Topic.tsx | 2 +- .../components/Sidebar/ValueRenderer/ValuePanel.tsx | 2 +- app/src/components/TopicPlot.tsx | 2 +- app/src/components/UpdateNotifier.tsx | 2 +- .../components/helper/ConnectionHealthIndicator.tsx | 2 +- app/src/components/helper/Copy.tsx | 2 +- app/src/components/helper/CustomIconButton.tsx | 2 +- app/src/components/helper/DateFormatter.tsx | 2 +- 17 files changed, 17 insertions(+), 27 deletions(-) diff --git a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx index 0b529a7..b955501 100644 --- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx +++ b/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 { - Button, - Grid, - IconButton, - TextField, - List, - ListItem, - ListItemText, - Tooltip, - Typography, -} from '@material-ui/core' +import { Button, Grid, IconButton, TextField, List, ListItem, ListItemText, Tooltip } from '@material-ui/core' interface Props { connection: ConnectionOptions diff --git a/app/src/components/ConnectionSetup/Certificates.tsx b/app/src/components/ConnectionSetup/Certificates.tsx index 390bdec..070b8fb 100644 --- a/app/src/components/ConnectionSetup/Certificates.tsx +++ b/app/src/components/ConnectionSetup/Certificates.tsx @@ -18,7 +18,7 @@ interface State { subscription: string } -class Certificates extends React.Component { +class Certificates extends React.PureComponent { constructor(props: any) { super(props) this.state = { subscription: '' } diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx index 3342bb2..9e41014 100644 --- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx +++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx @@ -20,7 +20,7 @@ interface Props { showCertificateSettings: boolean } -class ConnectionSetup extends React.Component { +class ConnectionSetup extends React.PureComponent { constructor(props: Props) { super(props) } diff --git a/app/src/components/ErrorBoundary.tsx b/app/src/components/ErrorBoundary.tsx index 0ad5f00..2d604f9 100644 --- a/app/src/components/ErrorBoundary.tsx +++ b/app/src/components/ErrorBoundary.tsx @@ -14,7 +14,7 @@ interface Props { classes: any } -class ErrorBoundary extends React.Component { +class ErrorBoundary extends React.PureComponent { public static getDerivedStateFromError(error: Error) { return { error } } diff --git a/app/src/components/Layout/Notification.tsx b/app/src/components/Layout/Notification.tsx index bbe27ac..47e4440 100644 --- a/app/src/components/Layout/Notification.tsx +++ b/app/src/components/Layout/Notification.tsx @@ -11,7 +11,7 @@ interface Props { classes: any } -class Notification extends React.Component { +class Notification extends React.PureComponent { constructor(props: Props) { super(props) } diff --git a/app/src/components/Layout/PauseButton.tsx b/app/src/components/Layout/PauseButton.tsx index 0d28d87..ca61880 100644 --- a/app/src/components/Layout/PauseButton.tsx +++ b/app/src/components/Layout/PauseButton.tsx @@ -28,7 +28,7 @@ interface Props { tree?: q.Tree } -class PauseButton extends React.Component { +class PauseButton extends React.PureComponent { private timer?: any constructor(props: Props) { super(props) diff --git a/app/src/components/Layout/TitleBar.tsx b/app/src/components/Layout/TitleBar.tsx index 95afdff..2b5a4a5 100644 --- a/app/src/components/Layout/TitleBar.tsx +++ b/app/src/components/Layout/TitleBar.tsx @@ -46,7 +46,7 @@ interface Props { topicFilter?: string } -class TitleBar extends React.Component { +class TitleBar extends React.PureComponent { constructor(props: any) { super(props) this.state = {} diff --git a/app/src/components/SettingsDrawer/Settings.tsx b/app/src/components/SettingsDrawer/Settings.tsx index 3689051..7d095b8 100644 --- a/app/src/components/SettingsDrawer/Settings.tsx +++ b/app/src/components/SettingsDrawer/Settings.tsx @@ -90,7 +90,7 @@ interface Props { theme: 'light' | 'dark' } -class Settings extends React.Component { +class Settings extends React.PureComponent { constructor(props: any) { super(props) this.state = {} diff --git a/app/src/components/Sidebar/CodeDiff/index.tsx b/app/src/components/Sidebar/CodeDiff/index.tsx index 88af889..2d13478 100644 --- a/app/src/components/Sidebar/CodeDiff/index.tsx +++ b/app/src/components/Sidebar/CodeDiff/index.tsx @@ -22,7 +22,7 @@ interface Props { interface State {} -class CodeDiff extends React.Component { +class CodeDiff extends React.PureComponent { private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre ~ pre' }) constructor(props: Props) { diff --git a/app/src/components/Sidebar/TopicPanel/Topic.tsx b/app/src/components/Sidebar/TopicPanel/Topic.tsx index 9099edd..edc4603 100644 --- a/app/src/components/Sidebar/TopicPanel/Topic.tsx +++ b/app/src/components/Sidebar/TopicPanel/Topic.tsx @@ -24,7 +24,7 @@ const styles = (theme: Theme) => ({ }, }) -class Topic extends React.Component { +class Topic extends React.PureComponent { public render() { const { node, theme } = this.props if (!node) { diff --git a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx index 275a8f4..eb832d3 100644 --- a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx +++ b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx @@ -41,7 +41,7 @@ interface Props { interface State {} -class ValuePanel extends React.Component { +class ValuePanel extends React.PureComponent { constructor(props: Props) { super(props) this.state = {} diff --git a/app/src/components/TopicPlot.tsx b/app/src/components/TopicPlot.tsx index e0f9433..50d3222 100644 --- a/app/src/components/TopicPlot.tsx +++ b/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) } }) diff --git a/app/src/components/UpdateNotifier.tsx b/app/src/components/UpdateNotifier.tsx index 9deab94..0db5197 100644 --- a/app/src/components/UpdateNotifier.tsx +++ b/app/src/components/UpdateNotifier.tsx @@ -45,7 +45,7 @@ interface State { newerVersions: Array } -class UpdateNotifier extends React.Component { +class UpdateNotifier extends React.PureComponent { constructor(props: any) { super(props) this.state = { newerVersions: [] } diff --git a/app/src/components/helper/ConnectionHealthIndicator.tsx b/app/src/components/helper/ConnectionHealthIndicator.tsx index 6ba0972..0084d63 100644 --- a/app/src/components/helper/ConnectionHealthIndicator.tsx +++ b/app/src/components/helper/ConnectionHealthIndicator.tsx @@ -37,7 +37,7 @@ interface Props { withBackground?: boolean } -class ConnectionHealthIndicator extends React.Component { +class ConnectionHealthIndicator extends React.PureComponent { constructor(props: any) { super(props) } diff --git a/app/src/components/helper/Copy.tsx b/app/src/components/helper/Copy.tsx index 260dae0..c9b496e 100644 --- a/app/src/components/helper/Copy.tsx +++ b/app/src/components/helper/Copy.tsx @@ -19,7 +19,7 @@ interface State { didCopy: boolean } -class Copy extends React.Component { +class Copy extends React.PureComponent { constructor(props: Props) { super(props) this.state = { didCopy: false } diff --git a/app/src/components/helper/CustomIconButton.tsx b/app/src/components/helper/CustomIconButton.tsx index f91c099..d75990c 100644 --- a/app/src/components/helper/CustomIconButton.tsx +++ b/app/src/components/helper/CustomIconButton.tsx @@ -21,7 +21,7 @@ const styles = (theme: Theme) => ({ }, }) -class CustomIconButton extends React.Component { +class CustomIconButton extends React.PureComponent { constructor(props: Props) { super(props) } diff --git a/app/src/components/helper/DateFormatter.tsx b/app/src/components/helper/DateFormatter.tsx index 569b108..1fb3ae1 100644 --- a/app/src/components/helper/DateFormatter.tsx +++ b/app/src/components/helper/DateFormatter.tsx @@ -16,7 +16,7 @@ const unitMapping = { h: 'hours', } -class DateFormatter extends React.Component { +class DateFormatter extends React.PureComponent { private intervalSince(intervalSince: Date) { const interval = intervalSince.getTime() - this.props.date.getTime() const unit = this.unitForInterval(interval)