🔧 Remove unnecessary re-renders (#3014)

* 🔧 Remove unnecessary re-renders

* address review comments

* address review comments

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -6,6 +6,7 @@ import {
   property,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -23,6 +24,7 @@ import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { LovelaceCard } from "../types";
 import { handleClick } from "../common/handle-click";
 import { UNAVAILABLE } from "../../../data/entity";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 interface Config extends LovelaceCardConfig {
   entity: string;
@@ -62,6 +64,10 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     this._config = { show_name: true, show_state: true, ...config };
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -6,6 +6,7 @@ import {
   property,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
@@ -87,6 +88,39 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_config")) {
+      return true;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass) {
+      return true;
+    }
+
+    if (this._entitiesDialog) {
+      for (const entity of this._entitiesDialog) {
+        if (
+          oldHass.states[entity.entity] !== this.hass!.states[entity.entity]
+        ) {
+          return true;
+        }
+      }
+    }
+
+    if (this._entitiesToggle) {
+      for (const entity of this._entitiesToggle) {
+        if (
+          oldHass.states[entity.entity] !== this.hass!.states[entity.entity]
+        ) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   property,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../../../components/ha-card";
@@ -18,6 +19,7 @@ import { LovelaceCardEditor, LovelaceCard } from "../types";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 const SENSORS = {
   moisture: "hass:water",
@@ -63,6 +65,10 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass || !this._config) {
       return html``;

src/panels/lovelace/cards/hui-sensor-card.ts

@@ -16,6 +16,7 @@ import { LovelaceCardConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { fetchRecent } from "../../../data/history";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 import computeStateName from "../../../common/entity/compute_state_name";
@@ -272,6 +273,14 @@ class HuiSensorCard extends LitElement implements LovelaceCard {
     this._date = new Date();
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_history")) {
+      return true;
+    }
+
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (!this._config || this._config.graph !== "line" || !this.hass) {

src/panels/lovelace/elements/hui-icon-element.ts

@@ -27,7 +27,7 @@ export interface Config extends LovelaceElementConfig {
 
 @customElement("hui-icon-element")
 export class HuiIconElement extends LitElement implements LovelaceElement {
-  @property() public hass?: HomeAssistant;
+  public hass?: HomeAssistant;
   @property() private _config?: Config;
 
   public setConfig(config: Config): void {

src/panels/lovelace/elements/hui-state-badge-element.ts

@@ -4,6 +4,7 @@ import {
   TemplateResult,
   customElement,
   property,
+  PropertyValues,
 } from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
@@ -12,6 +13,7 @@ import "../components/hui-warning-element";
 import computeStateName from "../../../common/entity/compute_state_name";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 export interface Config extends LovelaceElementConfig {
   entity: string;
@@ -31,6 +33,10 @@ export class HuiStateBadgeElement extends LitElement
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/elements/hui-state-icon-element.ts

@@ -6,6 +6,7 @@ import {
   property,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 
 import "../../../components/entity/state-badge";
@@ -17,6 +18,7 @@ import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { ActionConfig } from "../../../data/lovelace";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 export interface Config extends LovelaceElementConfig {
   entity: string;
@@ -37,6 +39,10 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/elements/hui-state-label-element.ts

@@ -6,6 +6,7 @@ import {
   property,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 
 import "../../../components/entity/ha-state-label-badge";
@@ -18,6 +19,7 @@ import { longPress } from "../common/directives/long-press-directive";
 import { LovelaceElement, LovelaceElementConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { ActionConfig } from "../../../data/lovelace";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 interface Config extends LovelaceElementConfig {
   entity: string;
@@ -40,6 +42,10 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-climate-entity-row.ts

@@ -6,6 +6,7 @@ import {
   css,
   CSSResult,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../../../components/ha-climate-state";
@@ -14,6 +15,7 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-climate-entity-row")
 class HuiClimateEntityRow extends LitElement implements EntityRow {
@@ -29,6 +31,10 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass || !this._config) {
       return html``;

src/panels/lovelace/entity-rows/hui-cover-entity-row.ts

@@ -6,6 +6,7 @@ import {
   css,
   CSSResult,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -16,6 +17,7 @@ import "../components/hui-warning";
 import { isTiltOnly } from "../../../util/cover-model";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-cover-entity-row")
 class HuiCoverEntityRow extends LitElement implements EntityRow {
@@ -30,6 +32,10 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-group-entity-row.ts

@@ -4,6 +4,7 @@ import {
   TemplateResult,
   property,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,6 +15,7 @@ import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-group-entity-row")
 class HuiGroupEntityRow extends LitElement implements EntityRow {
@@ -28,6 +30,10 @@ class HuiGroupEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -6,6 +6,7 @@ import {
   customElement,
   css,
   CSSResult,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -16,6 +17,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { EntityRow, EntityConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { setValue } from "../../../data/input_text";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-input-number-entity-row")
 class HuiInputNumberEntityRow extends LitElement implements EntityRow {
@@ -48,6 +50,10 @@ class HuiInputNumberEntityRow extends LitElement implements EntityRow {
     }
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -6,6 +6,7 @@ import {
   css,
   CSSResult,
   customElement,
+  PropertyValues,
 } from "lit-element";
 import { repeat } from "lit-html/directives/repeat";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -19,6 +20,7 @@ import computeStateName from "../../../common/entity/compute_state_name";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setOption } from "../../../data/input-select";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-input-select-entity-row")
 class HuiInputSelectEntityRow extends LitElement implements EntityRow {
@@ -34,6 +36,10 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass || !this._config) {
       return html``;

src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts

@@ -4,6 +4,7 @@ import {
   TemplateResult,
   property,
   customElement,
+  PropertyValues,
 } from "lit-element";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
@@ -13,6 +14,7 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setValue } from "../../../data/input_text";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-input-text-entity-row")
 class HuiInputTextEntityRow extends LitElement implements EntityRow {
@@ -27,6 +29,10 @@ class HuiInputTextEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -6,6 +6,7 @@ import {
   css,
   CSSResult,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -13,6 +14,7 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-lock-entity-row")
 class HuiLockEntityRow extends LitElement implements EntityRow {
@@ -27,6 +29,10 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   property,
   customElement,
+  PropertyValues,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 
@@ -22,6 +23,7 @@ import {
   OFF_STATES,
   SUPPORT_PAUSE,
 } from "../../../data/media-player";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-media-player-entity-row")
 class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
@@ -37,6 +39,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this.hass || !this._config) {
       return html``;

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -6,6 +6,7 @@ import {
   css,
   property,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,6 +15,7 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-scene-entity-row")
 class HuiSceneEntityRow extends LitElement implements EntityRow {
@@ -28,6 +30,10 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   css,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,10 +15,11 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-script-entity-row")
 class HuiScriptEntityRow extends LitElement implements EntityRow {
-  @property() public hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   @property() private _config?: EntityConfig;
 
@@ -28,6 +30,10 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   css,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,6 +15,7 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 
@@ -34,6 +36,10 @@ class HuiSensorEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-text-entity-row.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   css,
   customElement,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,6 +15,7 @@ import "../components/hui-warning";
 import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-text-entity-row")
 class HuiTextEntityRow extends LitElement implements EntityRow {
@@ -28,6 +30,10 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/entity-rows/hui-timer-entity-row.ts

@@ -15,6 +15,7 @@ import secondsToDuration from "../../../common/datetime/seconds_to_duration";
 import { HomeAssistant } from "../../../types";
 import { EntityConfig } from "./types";
 import { HassEntity } from "home-assistant-js-websocket";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-timer-entity-row")
 class HuiTimerEntityRow extends LitElement {
@@ -64,6 +65,14 @@ class HuiTimerEntityRow extends LitElement {
     `;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_timeRemaining")) {
+      return true;
+    }
+
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 

src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts

@@ -4,6 +4,7 @@ import {
   TemplateResult,
   customElement,
   property,
+  PropertyValues,
 } from "lit-element";
 
 import "../components/hui-generic-entity-row";
@@ -14,6 +15,7 @@ import computeStateDisplay from "../../../common/entity/compute_state_display";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
 
 @customElement("hui-toggle-entity-row")
 class HuiToggleEntityRow extends LitElement implements EntityRow {
@@ -28,6 +30,10 @@ class HuiToggleEntityRow extends LitElement implements EntityRow {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;

src/panels/lovelace/special-rows/hui-call-service-row.ts

@@ -17,7 +17,7 @@ import { HomeAssistant } from "../../../types";
 
 @customElement("hui-call-service-row")
 class HuiCallServiceRow extends LitElement implements EntityRow {
-  @property() public hass?: HomeAssistant;
+  public hass?: HomeAssistant;
 
   @property() private _config?: CallServiceConfig;