feat: made data prop reactive

package.json

@@ -95,6 +95,7 @@
     "@testing-library/react-native": "^12.6.1",
     "@types/color": "^3.0.6",
     "@types/jest": "^29.5.3",
+    "@types/lodash": "^4.17.13",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.70.0",
     "@types/react-native-vector-icons": "^6.4.18",
@@ -208,6 +209,7 @@
     ]
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "react-native-uuid": "^2.0.3",
     "zustand": "^4.5.5"
   },

src/TreeView.tsx

@@ -22,6 +22,7 @@ import { useTreeViewStore } from './store/treeView.store';
 import usePreviousState from './utils/usePreviousState';
 import { useShallow } from "zustand/react/shallow";
 import uuid from "react-native-uuid";
+import useDeepCompareEffect from "./utils/useDeepCompareEffect";
 
 const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
   (props, ref) => {
@@ -111,7 +112,9 @@ const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
 
     const prevSearchText = usePreviousState(searchText);
 
-    React.useEffect(() => {
+    useDeepCompareEffect(() => {
+      cleanUpTreeViewStore();
+
       updateInitialTreeViewData(data);
 
       if (selectionPropagation)
@@ -124,8 +127,7 @@ const _TreeView = React.forwardRef<TreeViewRef, TreeViewProps>(
 
       // Expand pre-expanded nodes
       expandNodes(storeId, preExpandedIds);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [data]);
 
     function selectNodes(ids: string[]) {
       toggleCheckboxes(storeId, ids, true);

src/utils/useDeepCompareEffect.ts

@@ -0,0 +1,29 @@
+import React, { useRef } from "react";
+import isEqual from "lodash/isEqual";
+
+/**
+ * Deep compare effect hook.
+ * Ensures the effect runs on the first render and whenever dependencies deeply change.
+ *
+ * @param effect The effect callback function.
+ * @param dependencies The dependencies array to compare deeply.
+ */
+export default function useDeepCompareEffect(
+  effect: React.EffectCallback,
+  dependencies: any[]
+) {
+  const previousDependenciesRef = useRef<any[]>();
+  const isFirstRender = useRef(true);
+
+  const hasChanged =
+    isFirstRender.current || !isEqual(previousDependenciesRef.current, dependencies);
+
+  React.useEffect(() => {
+    if (hasChanged) {
+      isFirstRender.current = false; // Mark that the first render has passed
+      previousDependenciesRef.current = dependencies; // Update dependencies reference
+      return effect();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasChanged]); // Depend only on the change detection flag
+};