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

example/src/CustomNode/ColorSelectorNode.js

@@ -1,30 +1,22 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { Handle } from 'react-flow-renderer';
 
-export default ({ data }) => {
+export default memo(({ data }) => {
   return (
     <>
       <Handle
         type="target"
         position="left"
         style={{ background: '#fff' }}
-        onConnect={params => console.log('handle onConnect', params)}
+        onConnect={(params) => console.log('handle onConnect', params)}
-      />
-      <div>Custom Color Picker Node: <strong>{data.color}</strong></div>
-      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color}/>
-      <Handle
-        type="source"
-        position="right"
-        id="a"
-        style={{ top: 10, background: '#fff' }}
-      />
-      <Handle
-        type="source"
-        position="right"
-        id="b"
-        style={{ bottom: 10, top: 'auto', background: '#fff' }}
       />
+      <div>
+        Custom Color Picker Node: <strong>{data.color}</strong>
+      </div>
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
+      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} />
+      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} />
     </>
   );
-};
+});

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) => {