refactor(nodes): wrap with memo, update transform without creatin new array #282

src/components/Nodes/DefaultNode.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const DefaultNode = ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
+const DefaultNode = memo(({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom }: NodeProps) => (
   <>
     <Handle type="target" position={targetPosition} />
     {data.label}
     <Handle type="source" position={sourcePosition} />
   </>
-);
+));
 
 DefaultNode.displayName = 'DefaultNode';
 

src/components/Nodes/InputNode.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const InputNode = ({ data, sourcePosition = Position.Bottom }: NodeProps) => (
+const InputNode = memo(({ data, sourcePosition = Position.Bottom }: NodeProps) => (
   <>
     {data.label}
     <Handle type="source" position={sourcePosition} />
   </>
-);
+));
 
 InputNode.displayName = 'InputNode';
 

src/components/Nodes/OutputNode.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
 
-const OutputNode = ({ data, targetPosition = Position.Top }: NodeProps) => (
+const OutputNode = memo(({ data, targetPosition = Position.Top }: NodeProps) => (
   <>
     <Handle type="target" position={targetPosition} />
     {data.label}
   </>
-);
+));
 
 OutputNode.displayName = 'OutputNode';