diff --git a/web-console/src/bootstrap/react-table-custom-pagination.tsx b/web-console/src/bootstrap/react-table-custom-pagination.tsx
index ee5f12f7637..9aa7562c907 100644
--- a/web-console/src/bootstrap/react-table-custom-pagination.tsx
+++ b/web-console/src/bootstrap/react-table-custom-pagination.tsx
@@ -44,7 +44,7 @@ interface ReactTableCustomPaginationState {
   page: string | number;
 }
 
-export class ReactTableCustomPagination extends React.Component<ReactTableCustomPaginationProps, ReactTableCustomPaginationState> {
+export class ReactTableCustomPagination extends React.PureComponent<ReactTableCustomPaginationProps, ReactTableCustomPaginationState> {
   constructor(props: ReactTableCustomPaginationProps) {
     super(props);
 
diff --git a/web-console/src/bootstrap/react-table-defaults.tsx b/web-console/src/bootstrap/react-table-defaults.tsx
index d68912b44c0..9ae236053d4 100644
--- a/web-console/src/bootstrap/react-table-defaults.tsx
+++ b/web-console/src/bootstrap/react-table-defaults.tsx
@@ -26,7 +26,7 @@ import { ReactTableCustomPagination } from './react-table-custom-pagination';
 
 /* tslint:disable:max-classes-per-file */
 
-class NoData extends React.Component {
+class NoData extends React.PureComponent {
   render() {
     const { children } = this.props;
     if (!children) return null;
diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx
index b4448d2da68..fc85f641c30 100644
--- a/web-console/src/components/action-cell/action-cell.tsx
+++ b/web-console/src/components/action-cell/action-cell.tsx
@@ -30,7 +30,7 @@ export interface ActionCellProps extends React.Props<any> {
   actions?: BasicAction[];
 }
 
-export class ActionCell extends React.Component<ActionCellProps, {}> {
+export class ActionCell extends React.PureComponent<ActionCellProps, {}> {
   static COLUMN_ID = 'actions';
   static COLUMN_LABEL = 'Actions';
   static COLUMN_WIDTH = 70;
diff --git a/web-console/src/components/action-icon/action-icon.tsx b/web-console/src/components/action-icon/action-icon.tsx
index 9742f44851e..ce27371a460 100644
--- a/web-console/src/components/action-icon/action-icon.tsx
+++ b/web-console/src/components/action-icon/action-icon.tsx
@@ -28,7 +28,7 @@ export interface ActionIconProps extends React.Props<any> {
   onClick?: () => void;
 }
 
-export class ActionIcon extends React.Component<ActionIconProps, {}> {
+export class ActionIcon extends React.PureComponent<ActionIconProps, {}> {
   render() {
     const { className, icon, onClick } = this.props;
 
diff --git a/web-console/src/components/array-input/array-input.tsx b/web-console/src/components/array-input/array-input.tsx
index 6b2bab96030..9ecca35f69d 100644
--- a/web-console/src/components/array-input/array-input.tsx
+++ b/web-console/src/components/array-input/array-input.tsx
@@ -28,7 +28,7 @@ export interface ArrayInputProps {
   disabled?: boolean;
 }
 
-export class ArrayInput extends React.Component<ArrayInputProps, { stringValue: string }> {
+export class ArrayInput extends React.PureComponent<ArrayInputProps, { stringValue: string }> {
   constructor(props: ArrayInputProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx
index d79e4be4ee7..383e88ee771 100644
--- a/web-console/src/components/auto-form/auto-form.tsx
+++ b/web-console/src/components/auto-form/auto-form.tsx
@@ -68,7 +68,7 @@ export interface AutoFormState<T> {
   jsonInputsValidity: any;
 }
 
-export class AutoForm<T extends Record<string, any>> extends React.Component<AutoFormProps<T>, AutoFormState<T>> {
+export class AutoForm<T extends Record<string, any>> extends React.PureComponent<AutoFormProps<T>, AutoFormState<T>> {
   static makeLabelName(label: string): string {
     let newLabel = label.split(/(?=[A-Z])/).join(' ').toLowerCase().replace(/\./g, ' ');
     newLabel = newLabel[0].toUpperCase() + newLabel.slice(1);
diff --git a/web-console/src/components/center-message/center-message.tsx b/web-console/src/components/center-message/center-message.tsx
index 89a83f8c320..ded1a2e6e41 100644
--- a/web-console/src/components/center-message/center-message.tsx
+++ b/web-console/src/components/center-message/center-message.tsx
@@ -23,7 +23,7 @@ import './center-message.scss';
 export interface CenterMessageProps extends React.Props<any> {
 }
 
-export class CenterMessage extends React.Component<CenterMessageProps, {}> {
+export class CenterMessage extends React.PureComponent<CenterMessageProps, {}> {
   render() {
     return <div className="center-message bp3-input">
       <div className="center-message-inner">
diff --git a/web-console/src/components/clearable-input/clearable-input.tsx b/web-console/src/components/clearable-input/clearable-input.tsx
index da4df344ed4..6e32c1b999f 100644
--- a/web-console/src/components/clearable-input/clearable-input.tsx
+++ b/web-console/src/components/clearable-input/clearable-input.tsx
@@ -28,7 +28,7 @@ export interface ClearableInputProps extends React.Props<any> {
   placeholder: string;
 }
 
-export class ClearableInput extends React.Component<ClearableInputProps, {}> {
+export class ClearableInput extends React.PureComponent<ClearableInputProps, {}> {
   render() {
     const { className, value, onChange, placeholder } = this.props;
 
diff --git a/web-console/src/components/external-link/external-link.tsx b/web-console/src/components/external-link/external-link.tsx
index 0a9c10200fe..88073fe80e2 100644
--- a/web-console/src/components/external-link/external-link.tsx
+++ b/web-console/src/components/external-link/external-link.tsx
@@ -22,7 +22,7 @@ export interface ExternalLinkProps extends React.Props<any> {
   href: string;
 }
 
-export class ExternalLink extends React.Component<ExternalLinkProps, {}> {
+export class ExternalLink extends React.PureComponent<ExternalLinkProps, {}> {
   render() {
     const { href, children } = this.props;
 
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 6792db2e5d0..c148d0431a8 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -60,7 +60,7 @@ export interface HeaderBarState {
   overlordDynamicConfigDialogOpen: boolean;
 }
 
-export class HeaderBar extends React.Component<HeaderBarProps, HeaderBarState> {
+export class HeaderBar extends React.PureComponent<HeaderBarProps, HeaderBarState> {
   constructor(props: HeaderBarProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/components/json-collapse/json-collapse.tsx b/web-console/src/components/json-collapse/json-collapse.tsx
index d8003524620..26add3cd6cd 100644
--- a/web-console/src/components/json-collapse/json-collapse.tsx
+++ b/web-console/src/components/json-collapse/json-collapse.tsx
@@ -29,7 +29,7 @@ interface JSONCollapseState {
   isOpen: boolean;
 }
 
-export class JSONCollapse extends React.Component<JSONCollapseProps, JSONCollapseState> {
+export class JSONCollapse extends React.PureComponent<JSONCollapseProps, JSONCollapseState> {
   constructor(props: any) {
     super(props);
     this.state = {
diff --git a/web-console/src/components/json-input/json-input.tsx b/web-console/src/components/json-input/json-input.tsx
index 8fa8163b618..877c482d839 100644
--- a/web-console/src/components/json-input/json-input.tsx
+++ b/web-console/src/components/json-input/json-input.tsx
@@ -34,7 +34,7 @@ interface JSONInputState {
   stringValue: string;
 }
 
-export class JSONInput extends React.Component<JSONInputProps, JSONInputState> {
+export class JSONInput extends React.PureComponent<JSONInputProps, JSONInputState> {
   constructor(props: JSONInputProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/components/loader/loader.tsx b/web-console/src/components/loader/loader.tsx
index 3a122b9df3b..dc2dd7f7a9a 100644
--- a/web-console/src/components/loader/loader.tsx
+++ b/web-console/src/components/loader/loader.tsx
@@ -28,7 +28,7 @@ export interface LoaderProps extends React.Props<any> {
 export interface LoaderState {
 }
 
-export class Loader extends React.Component<LoaderProps, LoaderState> {
+export class Loader extends React.PureComponent<LoaderProps, LoaderState> {
 
   render() {
     const { loadingText, loading } = this.props;
diff --git a/web-console/src/components/menu-checkbox/menu-checkbox.tsx b/web-console/src/components/menu-checkbox/menu-checkbox.tsx
index 21b438b8a3c..22b226d23b9 100644
--- a/web-console/src/components/menu-checkbox/menu-checkbox.tsx
+++ b/web-console/src/components/menu-checkbox/menu-checkbox.tsx
@@ -21,7 +21,7 @@ import * as React from 'react';
 
 import './menu-checkbox.scss';
 
-export class MenuCheckbox extends React.Component<ICheckboxProps, {}> {
+export class MenuCheckbox extends React.PureComponent<ICheckboxProps, {}> {
 
   render() {
     return <li className="menu-checkbox">
diff --git a/web-console/src/components/rule-editor/rule-editor.tsx b/web-console/src/components/rule-editor/rule-editor.tsx
index 7ba88366fbf..79c482d5380 100644
--- a/web-console/src/components/rule-editor/rule-editor.tsx
+++ b/web-console/src/components/rule-editor/rule-editor.tsx
@@ -47,7 +47,7 @@ export interface RuleEditorState {
   isOpen: boolean;
 }
 
-export class RuleEditor extends React.Component<RuleEditorProps, RuleEditorState> {
+export class RuleEditor extends React.PureComponent<RuleEditorProps, RuleEditorState> {
   static ruleToString(rule: Rule): string {
     return rule.type + (rule.period ? `(${rule.period})` : '') + (rule.interval ? `(${rule.interval})` : '');
   }
diff --git a/web-console/src/components/show-json/show-json.tsx b/web-console/src/components/show-json/show-json.tsx
index 477588a66e4..27995321a5d 100644
--- a/web-console/src/components/show-json/show-json.tsx
+++ b/web-console/src/components/show-json/show-json.tsx
@@ -36,7 +36,7 @@ export interface ShowJsonState {
   jsonValue: string;
 }
 
-export class ShowJson extends React.Component<ShowJsonProps, ShowJsonState> {
+export class ShowJson extends React.PureComponent<ShowJsonProps, ShowJsonState> {
   constructor(props: ShowJsonProps, context: any) {
     super(props, context);
     this.state = {
diff --git a/web-console/src/components/show-log/show-log.tsx b/web-console/src/components/show-log/show-log.tsx
index 3549a2f5e19..b02ad55f1cc 100644
--- a/web-console/src/components/show-log/show-log.tsx
+++ b/web-console/src/components/show-log/show-log.tsx
@@ -46,7 +46,7 @@ export interface ShowLogState {
   tail: boolean;
 }
 
-export class ShowLog extends React.Component<ShowLogProps, ShowLogState> {
+export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
   public log = React.createRef<HTMLTextAreaElement>();
 
   constructor(props: ShowLogProps, context: any) {
diff --git a/web-console/src/components/sql-control/sql-control.tsx b/web-console/src/components/sql-control/sql-control.tsx
index a3acae819f2..1a1dba5eb5a 100644
--- a/web-console/src/components/sql-control/sql-control.tsx
+++ b/web-console/src/components/sql-control/sql-control.tsx
@@ -79,7 +79,7 @@ export interface SqlControlState {
 }
 
 @HotkeysTarget
-export class SqlControl extends React.Component<SqlControlProps, SqlControlState> {
+export class SqlControl extends React.PureComponent<SqlControlProps, SqlControlState> {
   constructor(props: SqlControlProps, context: any) {
     super(props, context);
     this.state = {
diff --git a/web-console/src/components/table-cell/table-cell.tsx b/web-console/src/components/table-cell/table-cell.tsx
index 9f5e6dd0408..6970b1ddec9 100644
--- a/web-console/src/components/table-cell/table-cell.tsx
+++ b/web-console/src/components/table-cell/table-cell.tsx
@@ -39,7 +39,7 @@ interface ShortParts {
   suffix: string;
 }
 
-export class TableCell extends React.Component<NullTableCellProps, {}> {
+export class TableCell extends React.PureComponent<NullTableCellProps, {}> {
   static MAX_CHARS_TO_SHOW = 50;
 
   static possiblyTruncate(str: string): React.ReactNode {
diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
index 718f90dae55..f0b87acf1a1 100644
--- a/web-console/src/components/table-column-selector/table-column-selector.tsx
+++ b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -34,7 +34,7 @@ interface TableColumnSelectorState {
 
 }
 
-export class TableColumnSelector extends React.Component<TableColumnSelectorProps, TableColumnSelectorState> {
+export class TableColumnSelector extends React.PureComponent<TableColumnSelectorProps, TableColumnSelectorState> {
 
   constructor(props: TableColumnSelectorProps) {
     super(props);
diff --git a/web-console/src/components/view-control-bar/view-control-bar.tsx b/web-console/src/components/view-control-bar/view-control-bar.tsx
index 679c671c21d..5acc3d1d832 100644
--- a/web-console/src/components/view-control-bar/view-control-bar.tsx
+++ b/web-console/src/components/view-control-bar/view-control-bar.tsx
@@ -24,7 +24,7 @@ export interface ViewControlBarProps {
   label: string;
 }
 
-export class ViewControlBar extends React.Component<ViewControlBarProps, {}> {
+export class ViewControlBar extends React.PureComponent<ViewControlBarProps, {}> {
   constructor(props: ViewControlBarProps) {
     super(props);
   }
diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 582dc8e4134..7ff2278dad0 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -54,7 +54,7 @@ export interface ConsoleApplicationState {
   capabilitiesLoading: boolean;
 }
 
-export class ConsoleApplication extends React.Component<ConsoleApplicationProps, ConsoleApplicationState> {
+export class ConsoleApplication extends React.PureComponent<ConsoleApplicationProps, ConsoleApplicationState> {
   static MESSAGE_KEY = 'druid-console-message';
   static MESSAGE_DISMISSED = 'dismissed';
   private capabilitiesQueryManager: QueryManager<string, string>;
diff --git a/web-console/src/dialogs/about-dialog/about-dialog.tsx b/web-console/src/dialogs/about-dialog/about-dialog.tsx
index e2b957747f3..3c513736190 100644
--- a/web-console/src/dialogs/about-dialog/about-dialog.tsx
+++ b/web-console/src/dialogs/about-dialog/about-dialog.tsx
@@ -30,7 +30,7 @@ export interface AboutDialogProps extends React.Props<any> {
 export interface AboutDialogState {
 }
 
-export class AboutDialog extends React.Component<AboutDialogProps, AboutDialogState> {
+export class AboutDialog extends React.PureComponent<AboutDialogProps, AboutDialogState> {
   constructor(props: AboutDialogProps) {
     super(props);
     this.state = {};
diff --git a/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
index 9a00ff53abc..21770d8d60f 100644
--- a/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
+++ b/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
@@ -47,7 +47,7 @@ export interface AsyncAlertDialogState {
   working: boolean;
 }
 
-export class AsyncActionDialog extends React.Component<AsyncAlertDialogProps, AsyncAlertDialogState> {
+export class AsyncActionDialog extends React.PureComponent<AsyncAlertDialogProps, AsyncAlertDialogState> {
   constructor(props: AsyncAlertDialogProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/dialogs/compaction-dialog/compaction-dialog.tsx b/web-console/src/dialogs/compaction-dialog/compaction-dialog.tsx
index ac39ce2bb11..89e621aa879 100644
--- a/web-console/src/dialogs/compaction-dialog/compaction-dialog.tsx
+++ b/web-console/src/dialogs/compaction-dialog/compaction-dialog.tsx
@@ -36,7 +36,7 @@ export interface CompactionDialogState {
   allJSONValid: boolean;
 }
 
-export class CompactionDialog extends React.Component<CompactionDialogProps, CompactionDialogState> {
+export class CompactionDialog extends React.PureComponent<CompactionDialogProps, CompactionDialogState> {
   constructor(props: CompactionDialogProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.tsx b/web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.tsx
index 17d3b4f0ba5..7744eb5a02c 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.tsx
+++ b/web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.tsx
@@ -37,7 +37,7 @@ export interface CoordinatorDynamicConfigDialogState {
   historyRecords: any[];
 }
 
-export class CoordinatorDynamicConfigDialog extends React.Component<CoordinatorDynamicConfigDialogProps, CoordinatorDynamicConfigDialogState> {
+export class CoordinatorDynamicConfigDialog extends React.PureComponent<CoordinatorDynamicConfigDialogProps, CoordinatorDynamicConfigDialogState> {
   private historyQueryManager: QueryManager<string, any>;
 
   constructor(props: CoordinatorDynamicConfigDialogProps) {
diff --git a/web-console/src/dialogs/history-dialog/history-dialog.tsx b/web-console/src/dialogs/history-dialog/history-dialog.tsx
index c20907e4765..13c7647a0bd 100644
--- a/web-console/src/dialogs/history-dialog/history-dialog.tsx
+++ b/web-console/src/dialogs/history-dialog/history-dialog.tsx
@@ -31,7 +31,7 @@ interface HistoryDialogState {
 
 }
 
-export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDialogState> {
+export class HistoryDialog extends React.PureComponent<HistoryDialogProps, HistoryDialogState> {
   constructor(props: HistoryDialogProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx b/web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx
index af32fa217b0..140caa4ddf0 100644
--- a/web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx
+++ b/web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx
@@ -40,7 +40,7 @@ export interface LookupEditDialogProps extends React.Props<any> {
 export interface LookupEditDialogState {
 }
 
-export class LookupEditDialog extends React.Component<LookupEditDialogProps, LookupEditDialogState> {
+export class LookupEditDialog extends React.PureComponent<LookupEditDialogProps, LookupEditDialogState> {
 
   constructor(props: LookupEditDialogProps) {
     super(props);
diff --git a/web-console/src/dialogs/overlord-dynamic-config/overlord-dynamic-config.tsx b/web-console/src/dialogs/overlord-dynamic-config/overlord-dynamic-config.tsx
index 112b0d49d64..34773fbbd2b 100644
--- a/web-console/src/dialogs/overlord-dynamic-config/overlord-dynamic-config.tsx
+++ b/web-console/src/dialogs/overlord-dynamic-config/overlord-dynamic-config.tsx
@@ -38,7 +38,7 @@ export interface OverlordDynamicConfigDialogState {
   historyRecords: any[];
 }
 
-export class OverlordDynamicConfigDialog extends React.Component<OverlordDynamicConfigDialogProps, OverlordDynamicConfigDialogState> {
+export class OverlordDynamicConfigDialog extends React.PureComponent<OverlordDynamicConfigDialogProps, OverlordDynamicConfigDialogState> {
   private historyQueryManager: QueryManager<string, any>;
 
   constructor(props: OverlordDynamicConfigDialogProps) {
diff --git a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
index 57f9c7047db..10a038528c8 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
+++ b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
@@ -33,7 +33,7 @@ export interface QueryPlanDialogState {
 
 }
 
-export class QueryPlanDialog extends React.Component<QueryPlanDialogProps, QueryPlanDialogState> {
+export class QueryPlanDialog extends React.PureComponent<QueryPlanDialogProps, QueryPlanDialogState> {
 
   constructor(props: QueryPlanDialogProps) {
     super(props);
diff --git a/web-console/src/dialogs/retention-dialog/retention-dialog.tsx b/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
index bf78d21bb24..7aa4f563a89 100644
--- a/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
+++ b/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
@@ -51,7 +51,7 @@ export interface RetentionDialogState {
   historyRecords: any[];
 }
 
-export class RetentionDialog extends React.Component<RetentionDialogProps, RetentionDialogState> {
+export class RetentionDialog extends React.PureComponent<RetentionDialogProps, RetentionDialogState> {
   private historyQueryManager: QueryManager<string, any>;
 
   constructor(props: RetentionDialogProps) {
diff --git a/web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx b/web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx
index cb906977f10..babe53ae5d8 100644
--- a/web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx
+++ b/web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx
@@ -49,7 +49,7 @@ export interface SnitchDialogState {
   showHistory?: boolean;
 }
 
-export class SnitchDialog extends React.Component<SnitchDialogProps, SnitchDialogState> {
+export class SnitchDialog extends React.PureComponent<SnitchDialogProps, SnitchDialogState> {
   constructor(props: SnitchDialogProps) {
     super(props);
 
diff --git a/web-console/src/dialogs/spec-dialog/spec-dialog.tsx b/web-console/src/dialogs/spec-dialog/spec-dialog.tsx
index 50adebe743d..d3982aba6d0 100644
--- a/web-console/src/dialogs/spec-dialog/spec-dialog.tsx
+++ b/web-console/src/dialogs/spec-dialog/spec-dialog.tsx
@@ -33,7 +33,7 @@ export interface SpecDialogState {
   spec: string;
 }
 
-export class SpecDialog extends React.Component<SpecDialogProps, SpecDialogState> {
+export class SpecDialog extends React.PureComponent<SpecDialogProps, SpecDialogState> {
   static validJson(json: string): boolean {
     try {
       JSON.parse(json);
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
index 3b521f17f57..82875226224 100644
--- a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
@@ -33,7 +33,7 @@ interface SupervisorTableActionDialogState {
   activeTab: 'payload' | 'status' | 'stats' | 'history';
 }
 
-export class SupervisorTableActionDialog extends React.Component<SupervisorTableActionDialogProps, SupervisorTableActionDialogState> {
+export class SupervisorTableActionDialog extends React.PureComponent<SupervisorTableActionDialogProps, SupervisorTableActionDialogState> {
   constructor(props: SupervisorTableActionDialogProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
index 5870cead9c7..62e93ef8f56 100644
--- a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
+++ b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
@@ -34,7 +34,7 @@ interface TableActionDialogProps extends IDialogProps {
   bottomButtons?: React.ReactNode;
 }
 
-export class TableActionDialog extends React.Component<TableActionDialogProps, {}> {
+export class TableActionDialog extends React.PureComponent<TableActionDialogProps, {}> {
   constructor(props: TableActionDialogProps) {
     super(props);
     this.state = {};
diff --git a/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx b/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx
index 73412d78c20..986a1aa65de 100644
--- a/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx
+++ b/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx
@@ -33,7 +33,7 @@ interface TaskTableActionDialogState {
   activeTab: 'payload' | 'status' | 'reports' | 'log';
 }
 
-export class TaskTableActionDialog extends React.Component<TaskTableActionDialogProps, TaskTableActionDialogState> {
+export class TaskTableActionDialog extends React.PureComponent<TaskTableActionDialogProps, TaskTableActionDialogState> {
   constructor(props: TaskTableActionDialogProps) {
     super(props);
     this.state = {
diff --git a/web-console/src/views/datasource-view/datasource-view.tsx b/web-console/src/views/datasource-view/datasource-view.tsx
index fc6f685a4b2..40e24fe421e 100644
--- a/web-console/src/views/datasource-view/datasource-view.tsx
+++ b/web-console/src/views/datasource-view/datasource-view.tsx
@@ -83,7 +83,7 @@ export interface DatasourcesViewState {
   dropReloadInterval: string;
 }
 
-export class DatasourcesView extends React.Component<DatasourcesViewProps, DatasourcesViewState> {
+export class DatasourcesView extends React.PureComponent<DatasourcesViewProps, DatasourcesViewState> {
   static DISABLED_COLOR = '#0a1500';
   static FULLY_AVAILABLE_COLOR = '#57d500';
   static PARTIALLY_AVAILABLE_COLOR = '#ffbf00';
diff --git a/web-console/src/views/home-view/home-view.tsx b/web-console/src/views/home-view/home-view.tsx
index ff113c31385..7936cf1a0f6 100644
--- a/web-console/src/views/home-view/home-view.tsx
+++ b/web-console/src/views/home-view/home-view.tsx
@@ -76,7 +76,7 @@ export interface HomeViewState {
   serverCountError: string | null;
 }
 
-export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
+export class HomeView extends React.PureComponent<HomeViewProps, HomeViewState> {
   private statusQueryManager: QueryManager<string, any>;
   private datasourceQueryManager: QueryManager<string, any>;
   private segmentQueryManager: QueryManager<string, any>;
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index 8c31b82f3f0..299e451c79f 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -222,7 +222,7 @@ export interface LoadDataViewState {
   selectedMetricSpec: MetricSpec | null;
 }
 
-export class LoadDataView extends React.Component<LoadDataViewProps, LoadDataViewState> {
+export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDataViewState> {
   constructor(props: LoadDataViewProps) {
     super(props);
 
diff --git a/web-console/src/views/lookups-view/lookups-view.tsx b/web-console/src/views/lookups-view/lookups-view.tsx
index b94c2beb997..f9c19c30edf 100644
--- a/web-console/src/views/lookups-view/lookups-view.tsx
+++ b/web-console/src/views/lookups-view/lookups-view.tsx
@@ -61,7 +61,7 @@ export interface LookupsViewState {
   deleteLookupTier: string | null;
 }
 
-export class LookupsView extends React.Component<LookupsViewProps, LookupsViewState> {
+export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsViewState> {
   private lookupsGetQueryManager: QueryManager<string, {lookupEntries: any[], tiers: string[]}>;
   private tableColumnSelectionHandler: TableColumnSelectionHandler;
 
diff --git a/web-console/src/views/segments-view/segments-view.tsx b/web-console/src/views/segments-view/segments-view.tsx
index c81feed31db..c8de29bf3a1 100644
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/web-console/src/views/segments-view/segments-view.tsx
@@ -80,7 +80,7 @@ interface SegmentQueryResultRow {
   is_overshadowed: number;
 }
 
-export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsViewState> {
+export class SegmentsView extends React.PureComponent<SegmentsViewProps, SegmentsViewState> {
   private segmentsSqlQueryManager: QueryManager<QueryAndSkip, SegmentQueryResultRow[]>;
   private segmentsJsonQueryManager: QueryManager<any, SegmentQueryResultRow[]>;
   private tableColumnSelectionHandler: TableColumnSelectionHandler;
diff --git a/web-console/src/views/servers-view/servers-view.tsx b/web-console/src/views/servers-view/servers-view.tsx
index 4eca97bd96b..a17cfcce769 100644
--- a/web-console/src/views/servers-view/servers-view.tsx
+++ b/web-console/src/views/servers-view/servers-view.tsx
@@ -108,7 +108,7 @@ interface MiddleManagerQueryResultRow {
 
 interface ServerResultRow extends ServerQueryResultRow, Partial<LoadQueueStatus>, Partial<MiddleManagerQueryResultRow> {}
 
-export class ServersView extends React.Component<ServersViewProps, ServersViewState> {
+export class ServersView extends React.PureComponent<ServersViewProps, ServersViewState> {
   private serverQueryManager: QueryManager<string, ServerQueryResultRow[]>;
   private serverTableColumnSelectionHandler: TableColumnSelectionHandler;
 
diff --git a/web-console/src/views/sql-view/sql-view.tsx b/web-console/src/views/sql-view/sql-view.tsx
index a7e31f39ff0..574ebf4edea 100644
--- a/web-console/src/views/sql-view/sql-view.tsx
+++ b/web-console/src/views/sql-view/sql-view.tsx
@@ -62,7 +62,7 @@ interface SqlQueryResult {
   queryElapsed: number;
 }
 
-export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
+export class SqlView extends React.PureComponent<SqlViewProps, SqlViewState> {
   static trimSemicolon(query: string): string {
     // Trims out a trailing semicolon while preserving space (https://bit.ly/1n1yfkJ)
     return query.replace(/;+(\s*)$/, '$1');
diff --git a/web-console/src/views/task-view/tasks-view.tsx b/web-console/src/views/task-view/tasks-view.tsx
index e58424d0a37..53ed92e2d24 100644
--- a/web-console/src/views/task-view/tasks-view.tsx
+++ b/web-console/src/views/task-view/tasks-view.tsx
@@ -109,7 +109,7 @@ function statusToColor(status: string): string {
   }
 }
 
-export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
+export class TasksView extends React.PureComponent<TasksViewProps, TasksViewState> {
   private supervisorQueryManager: QueryManager<string, SupervisorQueryResultRow[]>;
   private taskQueryManager: QueryManager<string, TaskQueryResultRow[]>;
   private supervisorTableColumnSelectionHandler: TableColumnSelectionHandler;