diff --git a/src/EdgeRenderer/EdgeTypes/wrapEdge.js b/src/EdgeRenderer/EdgeTypes/wrapEdge.js index 6440c9a3..fdce0356 100644 --- a/src/EdgeRenderer/EdgeTypes/wrapEdge.js +++ b/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) => { ); -}; +}); diff --git a/src/GlobalKeyHandler/index.js b/src/GlobalKeyHandler/index.js index 66c85e3b..5a647426 100644 --- a/src/GlobalKeyHandler/index.js +++ b/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; -}; +}); diff --git a/src/GraphView/index.js b/src/GraphView/index.js index 20d6ab5c..18ae6c97 100644 --- a/src/GraphView/index.js +++ b/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) => { /> ); -}; - +}); export default ReactSizeMe.withSize({ monitorHeight: true })(GraphView); diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js index 74fcfbc3..89d89a74 100644 --- a/src/NodeRenderer/NodeTypes/wrapNode.js +++ b/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) => { ); -}; +}); diff --git a/src/NodesSelection/index.js b/src/NodesSelection/index.js index 7f15e429..64c46cb3 100644 --- a/src/NodesSelection/index.js +++ b/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 () => { ); -}; \ No newline at end of file +}); \ No newline at end of file diff --git a/src/UserSelection/index.js b/src/UserSelection/index.js index 3ef5310a..e4ad8d95 100644 --- a/src/UserSelection/index.js +++ b/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 () => { )} ); -} \ No newline at end of file +});