Merge pull request #52 from AykutSarac/optimize-rendering

Optimize Rendering Performance

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>
   );
 };

src/components/CustomNode/index.tsx

@@ -19,34 +19,33 @@ const baseLabelStyle = {
 };
 
 export const CustomNode = (nodeProps: NodeProps) => {
-  const { properties: data } = nodeProps;
+  const { properties } = nodeProps;
 
   return (
     <Node {...nodeProps} label={<Label style={baseLabelStyle} />}>
-      {() => {
-        const { width, height } = nodeProps;
+      {({ width, height, x, y }) => {
+        if (properties.text instanceof Object) {
+          const entries = Object.entries<string>(properties.text);
 
-        if (data.text instanceof Object) {
-          const entries = Object.entries<string>(data.text);
           return (
             <ObjectNode
-              x={nodeProps.x}
-              y={nodeProps.y}
+              value={entries}
               width={width}
               height={height}
-              value={entries}
+              x={x}
+              y={y}
             />
           );
         }
 
         return (
           <TextNode
-            isParent={data.data.isParent}
+            isParent={properties.data.isParent}
+            value={properties.text}
             width={width}
             height={height}
-            value={data.text}
-            x={nodeProps.x}
-            y={nodeProps.y}
+            x={x}
+            y={y}
           />
         );
       }}

src/components/GoogleAnalytics/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const isDevelopment = process.env.NODE_ENV === "development";
 
-export const GoogleAnalytics = () => {
+export const GoogleAnalytics: React.FC = () => {
   if (isDevelopment) return null;
 
   return (

src/components/Graph/index.tsx

@@ -4,7 +4,7 @@ import { CustomNode } from "src/components/CustomNode";
 import { useConfig } from "src/hocs/config";
 import { getEdgeNodes } from "src/containers/LiveEditor/helpers";
 
-export const Graph = () => {
+export const Graph: React.FC = () => {
   const { json, settings } = useConfig();
   const [nodes, setNodes] = React.useState<NodeData[]>([]);
   const [edges, setEdges] = React.useState<EdgeData[]>([]);

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"