From 7bc87e606f2e7d8f81693897be281155689f1b8d Mon Sep 17 00:00:00 2001
From: Nishchay Rajput <nishchayr@iitbhilai.ac.in>
Date: Sat, 25 Jan 2025 14:44:00 +0530
Subject: [PATCH] fix: oncoTree rendering multiple times

---
 web/src/main/javascript/src/pages/Home/Home.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/main/javascript/src/pages/Home/Home.tsx b/web/src/main/javascript/src/pages/Home/Home.tsx
index 8af72e78..9241164d 100644
--- a/web/src/main/javascript/src/pages/Home/Home.tsx
+++ b/web/src/main/javascript/src/pages/Home/Home.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import OncoTree, { OncoTreeNode, ToolbarAction } from "@oncokb/oncotree";
 import ToolbarItem from "../../components/Toolbar/ToolbarItem";
 
@@ -17,21 +17,22 @@ export default function Home({
 }: IHomeProps) {
   const treeContainerRef = useRef<HTMLDivElement>(null);
   const dataRef = useRef<typeof oncoTreeData | undefined>();
-
+  const [isInitialized, setIsInitialized] = useState(false);
   useEffect(() => {
     const versionChanged = dataRef.current !== oncoTreeData;
 
-    if (treeContainerRef.current && versionChanged) {
+    if (treeContainerRef.current && versionChanged && !isInitialized) {
       if (treeContainerRef.current.children.length > 0) {
         treeContainerRef.current.innerHTML = "";
       }
 
       const oncoTree = new OncoTree(TREE_CONTAINER_ID, oncoTreeData);
       onOncoTreeInit(oncoTree);
+      setIsInitialized(true);
     }
 
     dataRef.current = oncoTreeData;
-  }, [oncoTreeData, onOncoTreeInit]);
+  }, [oncoTreeData, onOncoTreeInit, isInitialized]);
 
   return (
     <>