diff --git a/src/components/CustomNode/ObjectNode.tsx b/src/components/CustomNode/ObjectNode.tsx index 143f7e7a3fe..d3881607909 100644 --- a/src/components/CustomNode/ObjectNode.tsx +++ b/src/components/CustomNode/ObjectNode.tsx @@ -6,7 +6,9 @@ import * as Styled from "./styles"; const inViewport = true; -const ObjectNode: React.FC> = ({ +type ObjectNodeProps = CustomNodeProps<[string, string][]>; + +const ObjectNode: React.FC = ({ width, height, value, @@ -46,4 +48,8 @@ const ObjectNode: React.FC> = ({ ); }; -export default ObjectNode; +function propsAreEqual(prev: ObjectNodeProps, next: ObjectNodeProps) { + return prev.width === next.width && prev.height === next.height; +} + +export default React.memo(ObjectNode, propsAreEqual); diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx index c5cd56e4820..63e104566ab 100644 --- a/src/components/CustomNode/TextNode.tsx +++ b/src/components/CustomNode/TextNode.tsx @@ -35,9 +35,12 @@ const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>` width: 100%; `; -const TextNode: React.FC< - CustomNodeProps & { node: NodeData; hasCollapse: boolean } -> = ({ +type TextNodeProps = CustomNodeProps & { + node: NodeData; + hasCollapse: boolean; +}; + +const TextNode: React.FC = ({ 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); diff --git a/src/components/CustomNode/index.tsx b/src/components/CustomNode/index.tsx index 1be41ab5534..b9540ddfe9b 100644 --- a/src/components/CustomNode/index.tsx +++ b/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 { y: number; } -const baseLabelStyle = { - fill: "transparent", - stroke: "transparent", - strokeWidth: 0, -}; - export const CustomNode = (nodeProps: NodeProps) => { const { properties } = nodeProps; return ( - }> + }> {({ width, height, x, y, node }) => { if (Array.isArray(properties.text)) { return (