🐛 Prevent rendering if component is not connected to dom

Festify · Jan 15, 2018 · 6a2fbcb · 6a2fbcb
1 parent c880b61
commit 6a2fbcb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fit-html",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "5KB functional Web Components without bloat",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/connect.ts b/src/connect.ts
@@ -109,6 +109,7 @@ export default function connect<S, SP, DP, OP = {}>(
     templateFn: (props: SP & DP) => TemplateResult,
 ): ClassConstructor<FitElement<S, SP & DP, OP>> {
     return class extends HTMLElement {
+        private _isConnected: boolean = false;
         private _preparedDispatch: MapDispatchToPropsFn<S, DP, OP> | ActionCreatorsMapObject;
         private _preparedMapStateToProps: MapStateToPropsFn<S, SP, OP>;
         private _previousProps: SP & DP | null = null;
@@ -135,6 +136,8 @@ export default function connect<S, SP, DP, OP = {}>(
         }
 
         connectedCallback() {
+            this._isConnected = true;
+
             const store = this.getStore();
             this._preparedDispatch = isFunction(mapDispatchToProps)
                 ? mapDispatchToProps
@@ -145,6 +148,8 @@ export default function connect<S, SP, DP, OP = {}>(
         }
 
         disconnectedCallback() {
+            this._isConnected = false;
+
             this._unsubscribe();
             this._store = undefined!;
         }
@@ -192,6 +197,10 @@ export default function connect<S, SP, DP, OP = {}>(
         }
 
         render() {
+            if (!this._isConnected) {
+                return;
+            }
+
             const props = this.getProps();
 
             if (shallowEqual(props, this._previousProps)) {