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';
 

src/store/index.ts

@@ -330,7 +330,9 @@ export const storeModel: StoreModel = {
   }),
 
   updateTransform: action((state, transform) => {
-    state.transform = [transform.x, transform.y, transform.k];
+    state.transform[0] = transform.x;
+    state.transform[1] = transform.y;
+    state.transform[2] = transform.k;
   }),
 
   updateSize: action((state, size) => {