refactor(app): use memo fpr comps

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -1,14 +1,13 @@
-import React, { useContext } from 'react';
-import ReactDraggable from 'react-draggable';
+import React, { useContext, memo } from 'react';
 import cx from 'classnames';
 
 import { GraphContext } from '../../GraphContext';
-import { updateNodePos, setSelectedElements } from '../../state/actions';
+import { setSelectedElements } from '../../state/actions';
 import { isEdge } from '../../graph-utils';
 
 const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
-export default EdgeComponent => (props) => {
+export default EdgeComponent => memo((props) => {
   const { state, dispatch } = useContext(GraphContext);
   const { data, onClick } = props;
   const selected = state.selectedElements
@@ -31,4 +30,4 @@ export default EdgeComponent => (props) => {
       <EdgeComponent {...props} />
     </g>
   );
-};
+});

src/GlobalKeyHandler/index.js

@@ -1,11 +1,11 @@
-import { useEffect, useContext } from 'react';
+import { useEffect, useContext, memo } from 'react';
 
 import { useKeyPress } from '../hooks';
 import { setNodesSelection } from '../state/actions';
 import { GraphContext } from '../GraphContext';
 import { isEdge, getConnectedEdges } from '../graph-utils';
 
-export default (props) => {
+export default memo((props) => {
   const { state, dispatch } = useContext(GraphContext);
   const removePressed = useKeyPress('Backspace');
 
@@ -25,4 +25,4 @@ export default (props) => {
   }, [removePressed])
 
   return null;
-};
+});

src/GraphView/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useRef } from 'react';
+import React, { useEffect, useContext, useRef, memo } from 'react';
 import * as d3Zoom from 'd3-zoom';
 import { select, event } from 'd3-selection';
 import ReactSizeMe from 'react-sizeme';
@@ -13,7 +13,7 @@ import { useKeyPress } from '../hooks';
 
 const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
 
-const GraphView = (props) => {
+const GraphView = memo((props) => {
   const zoomPane = useRef(null);
   const { state, dispatch } = useContext(GraphContext);
   const shiftPressed = useKeyPress('Shift');
@@ -88,7 +88,6 @@ const GraphView = (props) => {
       />
     </div>
   );
-};
-
+});
 
 export default ReactSizeMe.withSize({ monitorHeight: true })(GraphView);

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext, useState } from 'react';
+import React, { useEffect, useRef, useContext, useState, memo } from 'react';
 import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
@@ -8,7 +8,7 @@ import { isEdge } from '../../graph-utils';
 
 const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
-export default NodeComponent => (props) => {
+export default NodeComponent => memo((props) => {
   const nodeElement = useRef(null);
   const { state, dispatch } = useContext(GraphContext);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -81,4 +81,4 @@ export default NodeComponent => (props) => {
       </div>
     </ReactDraggable.DraggableCore>
   );
-};
+});

src/NodesSelection/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, memo } from 'react';
 import ReactDraggable from 'react-draggable';
 
 import { GraphContext } from '../GraphContext';
@@ -20,7 +20,7 @@ function getStartPositions(elements) {
   }, {});
 }
 
-export default () => {
+export default memo(() => {
   const graphContext = useContext(GraphContext);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [startPositions, setStartPositions] = useState({});
@@ -79,4 +79,4 @@ export default () => {
       </ReactDraggable>
     </div>
   );
-};
+});

src/UserSelection/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useContext } from 'react';
+import React, { useEffect, useRef, useState, useContext, memo } from 'react';
 
 import { GraphContext } from '../GraphContext';
 import { updateSelection, setSelection, setNodesSelection } from '../state/actions';
@@ -22,7 +22,7 @@ function getMousePosition(evt) {
   };
 }
 
-export default () => {
+export default memo(() => {
   const selectionPane = useRef(null);
   const [rect, setRect] = useState(initialRect);
   const { dispatch } = useContext(GraphContext);
@@ -106,4 +106,4 @@ export default () => {
       )}
     </div>
   );
-}
+});