Merge pull request #11 from aljadan/main

Implement deep equality check for line chart props comparison

Author: WadhahEssam

example/App.js

@@ -1,4 +1,4 @@
 /* eslint-disable no-restricted-exports */
 import 'react-native-gesture-handler';
 
-export {default} from './src/App2';
+export {default} from './src/App';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-simple-line-chart",
-  "version": "0.37.0",
+  "version": "0.37.1",
   "description": "A fast, interactive, animated and simple line chart component for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/LineChart.tsx

@@ -15,6 +15,7 @@ import {
     LineChart as LineChartProps,
     LineChartRef,
 } from './types';
+import { isEqual } from './utils';
 
 const getExtraConfig = (extraConfig: ExtraConfig): ExtraConfig => {
     return {
@@ -221,23 +222,13 @@ export const MemoizedLineChart = React.memo(
             return false;
         }
 
-        if (
-            JSON.stringify(previousProps.lines[previousProps.activeLineIndex || 0]) !==
-            JSON.stringify(nextProps.lines[nextProps.activeLineIndex || 0])
-        ) {
-            return false;
-        }
-
-        if (
-            JSON.stringify(previousProps.lines[1]?.data) !==
-            JSON.stringify(nextProps.lines[1]?.data)
-        ) {
+        if (!isEqual(previousProps.lines, nextProps.lines)) {
             return false;
         }
 
         if (
-            JSON.stringify(previousProps.backgroundColor) !==
-            JSON.stringify(nextProps.backgroundColor)
+            previousProps.backgroundColor !==
+            nextProps.backgroundColor
         ) {
             return false;
         }

src/utils.ts

@@ -248,3 +248,102 @@ export const useForceReRender = () => {
 
     return forceUpdate;
 };
+
+/**
+ * Fast deep equality comparison function
+ * Based on fast-deep-equal library
+ * Note: Functions are treated as equal without deep comparison
+ */
+export function isEqual(a: any, b: any): boolean {
+    if (a === b) return true;
+
+    // Ignore function checks - return them as equal
+    if (typeof a === 'function' && typeof b === 'function') return true;
+
+    if (a && b && typeof a === 'object' && typeof b === 'object') {
+        if (a.constructor !== b.constructor) return false;
+
+        let length: number;
+        let i: any;
+        let keys: string[];
+
+        if (Array.isArray(a)) {
+            length = a.length;
+            if (length !== b.length) return false;
+            for (i = length; i-- !== 0; ) {
+                if (!isEqual(a[i], b[i])) return false;
+            }
+            return true;
+        }
+
+        if (a instanceof Map && b instanceof Map) {
+            if (a.size !== b.size) return false;
+            for (i of a.entries()) {
+                if (!b.has(i[0])) return false;
+            }
+            for (i of a.entries()) {
+                if (!isEqual(i[1], b.get(i[0]))) return false;
+            }
+            return true;
+        }
+
+        if (a instanceof Set && b instanceof Set) {
+            if (a.size !== b.size) return false;
+            for (i of a.entries()) {
+                if (!b.has(i[0])) return false;
+            }
+            return true;
+        }
+
+        if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+            const aView = a as any;
+            const bView = b as any;
+            length = aView.length;
+            if (length !== bView.length) return false;
+            for (i = length; i-- !== 0; ) {
+                if (aView[i] !== bView[i]) return false;
+            }
+            return true;
+        }
+
+        if (a.constructor === RegExp) {
+            return a.source === b.source && a.flags === b.flags;
+        }
+
+        if (a.valueOf !== Object.prototype.valueOf) {
+            return a.valueOf() === b.valueOf();
+        }
+
+        if (a.toString !== Object.prototype.toString) {
+            return a.toString() === b.toString();
+        }
+
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length) return false;
+
+        for (i = length; i-- !== 0; ) {
+            const key = keys[i];
+            if (key !== undefined && !Object.prototype.hasOwnProperty.call(b, key)) return false;
+        }
+
+        for (i = length; i-- !== 0; ) {
+            const key = keys[i];
+            if (key === undefined) continue;
+
+            // React-specific: avoid traversing React elements' _owner
+            // _owner contains circular references and is not needed when comparing actual elements
+            if (key === '_owner' && a.$$typeof) {
+                continue;
+            }
+
+            if (!isEqual(a[key], b[key])) return false;
+        }
+
+        return true;
+    }
+
+    // true if both NaN, false otherwise
+    return a !== a && b !== b;
+}
+