Merge pull request #157 from AykutSarac/editor-perf

Improve Editor Rerender Performance

src/components/CustomNode/ObjectNode.tsx

@@ -6,7 +6,9 @@ import * as Styled from "./styles";
 
 const inViewport = true;
 
-const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
+type ObjectNodeProps = CustomNodeProps<[string, string][]>;
+
+const ObjectNode: React.FC<ObjectNodeProps> = ({
   width,
   height,
   value,
@@ -46,4 +48,8 @@ const ObjectNode: React.FC<CustomNodeProps<[string, string][]>> = ({
   );
 };
 
-export default ObjectNode;
+function propsAreEqual(prev: ObjectNodeProps, next: ObjectNodeProps) {
+  return prev.width === next.width && prev.height === next.height;
+}
+
+export default React.memo(ObjectNode, propsAreEqual);

src/components/CustomNode/TextNode.tsx

@@ -35,9 +35,12 @@ const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
   width: 100%;
 `;
 
-const TextNode: React.FC<
-  CustomNodeProps<string> & { node: NodeData; hasCollapse: boolean }
-> = ({
+type TextNodeProps = CustomNodeProps<string> & {
+  node: NodeData;
+  hasCollapse: boolean;
+};
+
+const TextNode: React.FC<TextNodeProps> = ({
   node,
   width,
   height,
@@ -99,4 +102,8 @@ const TextNode: React.FC<
   );
 };
 
-export default TextNode;
+function propsAreEqual(prev: TextNodeProps, next: TextNodeProps) {
+  return prev.value === next.value;
+}
+
+export default React.memo(TextNode, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Label, Node, NodeProps } from "reaflow";
+import { Node, NodeProps } from "reaflow";
 import ObjectNode from "./ObjectNode";
 import TextNode from "./TextNode";
 
@@ -12,17 +12,11 @@ export interface CustomNodeProps<T> {
   y: number;
 }
 
-const baseLabelStyle = {
-  fill: "transparent",
-  stroke: "transparent",
-  strokeWidth: 0,
-};
-
 export const CustomNode = (nodeProps: NodeProps) => {
   const { properties } = nodeProps;
 
   return (
-    <Node {...nodeProps} label={<Label style={baseLabelStyle} />}>
+    <Node {...nodeProps} label={<React.Fragment />}>
       {({ width, height, x, y, node }) => {
         if (Array.isArray(properties.text)) {
           return (