fix: fixed issue with component update

Author: matteobruni

components/react-alt/src/Particles.tsx

@@ -41,17 +41,20 @@ export default class Particles extends Component<IParticlesProps, IParticlesStat
     }
 
     shouldComponentUpdate(nextProps: Readonly<IParticlesProps>): boolean {
+        const nextOptions = nextProps.options ?? nextProps.params,
+            currentOptions = this.props.options ?? this.props.params;
+
         return (
-            nextProps.url !== this.props.url &&
-            nextProps.id !== this.props.id &&
-            nextProps.canvasClassName !== this.props.canvasClassName &&
-            nextProps.className !== this.props.className &&
-            nextProps.height !== this.props.height &&
-            nextProps.width !== this.props.width &&
-            !deepCompare(nextProps.style, this.props.style) &&
-            nextProps.init !== this.props.init &&
-            nextProps.loaded !== this.props.loaded &&
-            !deepCompare(nextProps.options ?? nextProps.params, this.props.options && this.props.params)
+            nextProps.url !== this.props.url ||
+            nextProps.id !== this.props.id ||
+            nextProps.canvasClassName !== this.props.canvasClassName ||
+            nextProps.className !== this.props.className ||
+            nextProps.height !== this.props.height ||
+            nextProps.width !== this.props.width ||
+            !deepCompare(nextProps.style, this.props.style) ||
+            nextProps.init !== this.props.init ||
+            nextProps.loaded !== this.props.loaded ||
+            !deepCompare(nextOptions, currentOptions, key => key.startsWith("_"))
         );
     }
 

components/react-alt/src/Utils.ts

@@ -17,8 +17,6 @@ export function deepCompare(
     }
 
     for (const key of keys1) {
-        console.log("key");
-
         const value1: unknown = (obj1 as Record<string, unknown>)[key],
             value2: unknown = (obj2 as Record<string, unknown>)[key];
 

components/react/src/Particles.tsx

@@ -41,17 +41,20 @@ export default class Particles extends Component<IParticlesProps, IParticlesStat
     }
 
     shouldComponentUpdate(nextProps: Readonly<IParticlesProps>): boolean {
+        const nextOptions = nextProps.options ?? nextProps.params,
+            currentOptions = this.props.options ?? this.props.params;
+
         return (
-            nextProps.url !== this.props.url &&
-            nextProps.id !== this.props.id &&
-            nextProps.canvasClassName !== this.props.canvasClassName &&
-            nextProps.className !== this.props.className &&
-            nextProps.height !== this.props.height &&
-            nextProps.width !== this.props.width &&
-            !deepCompare(nextProps.style, this.props.style) &&
-            nextProps.init !== this.props.init &&
-            nextProps.loaded !== this.props.loaded &&
-            !deepCompare(nextProps.options ?? nextProps.params, this.props.options && this.props.params)
+            nextProps.url !== this.props.url ||
+            nextProps.id !== this.props.id ||
+            nextProps.canvasClassName !== this.props.canvasClassName ||
+            nextProps.className !== this.props.className ||
+            nextProps.height !== this.props.height ||
+            nextProps.width !== this.props.width ||
+            !deepCompare(nextProps.style, this.props.style) ||
+            nextProps.init !== this.props.init ||
+            nextProps.loaded !== this.props.loaded ||
+            !deepCompare(nextOptions, currentOptions, key => key.startsWith("_"))
         );
     }
 

components/react/src/Utils.ts

@@ -17,8 +17,6 @@ export function deepCompare(
     }
 
     for (const key of keys1) {
-        console.log("key");
-
         const value1: unknown = (obj1 as Record<string, unknown>)[key],
             value2: unknown = (obj2 as Record<string, unknown>)[key];