use "react-render-if-visible"

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.0.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.3.1",
+    "react-render-if-visible": "^2.1.0",
     "react-zoom-pan-pinch": "^2.1.3",
     "reaflow": "^5.0.4",
     "save-html-as-image": "^1.7.1",

src/components/CustomNode/ObjectNode.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import RenderIfVisible from "react-render-if-visible";
 import { CustomNodeProps } from ".";
 import * as Styled from "./styles";
 
@@ -11,25 +12,27 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
 }) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
-      <Styled.StyledTextWrapper>
-        <Styled.StyledText width={width} height={height}>
-          {value.map(
-            (val, idx) =>
-              val[1] && (
-                <Styled.StyledRow
-                  data-key={val[1]}
-                  data-x={x}
-                  data-y={y}
-                  key={idx}
-                  width={width}
-                >
-                  <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
-                  {val[1]}
-                </Styled.StyledRow>
-              )
-          )}
-        </Styled.StyledText>
-      </Styled.StyledTextWrapper>
+      <RenderIfVisible>
+        <Styled.StyledTextWrapper>
+          <Styled.StyledText width={width} height={height}>
+            {value.map(
+              (val, idx) =>
+                val[1] && (
+                  <Styled.StyledRow
+                    data-key={val[1]}
+                    data-x={x}
+                    data-y={y}
+                    key={idx}
+                    width={width}
+                  >
+                    <Styled.StyledKey objectKey>{val[0]}: </Styled.StyledKey>
+                    {val[1]}
+                  </Styled.StyledRow>
+                )
+            )}
+          </Styled.StyledText>
+        </Styled.StyledTextWrapper>
+      </RenderIfVisible>
     </Styled.StyledForeignObject>
   );
 };

src/components/CustomNode/TextNode.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import RenderIfVisible from "react-render-if-visible";
 import { CustomNodeProps } from ".";
 import * as Styled from "./styles";
 
@@ -8,15 +9,24 @@ const TextNode: React.FC<CustomNodeProps<string>> = ({
   value,
   isParent = false,
   x,
-  y
+  y,
 }) => {
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
-      <Styled.StyledTextWrapper>
-        <Styled.StyledText width={width} height={height}>
-          <Styled.StyledKey data-x={x} data-y={y} data-key={value} parent={isParent}>{value}</Styled.StyledKey>
-        </Styled.StyledText>
-      </Styled.StyledTextWrapper>
+      <RenderIfVisible>
+        <Styled.StyledTextWrapper>
+          <Styled.StyledText width={width} height={height}>
+            <Styled.StyledKey
+              data-x={x}
+              data-y={y}
+              data-key={value}
+              parent={isParent}
+            >
+              {value}
+            </Styled.StyledKey>
+          </Styled.StyledText>
+        </Styled.StyledTextWrapper>
+      </RenderIfVisible>
     </Styled.StyledForeignObject>
   );
 };

yarn.lock

@@ -5367,6 +5367,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
+react-render-if-visible@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-render-if-visible/-/react-render-if-visible-2.1.0.tgz#2a8d3c3e2f32394c78967bb58ee7546666831605"
+  integrity sha512-mOLrj0eDezdTB9zxjBaOOP+cOHVKhoCQCk6qZlHev9a6Edb0eQs2CfHqBa1PNq3kfCW28NAS8QJMXXMJsUonxw==
+
 react-scrolllock@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scrolllock/-/react-scrolllock-5.0.1.tgz#da1cfb7b6d55c86ae41dbad5274b778c307752b7"