refactor(graphcontext): memoize context

dist/ReactGraph.js

@@ -30145,8 +30145,7 @@
   var GraphContext = React.createContext({});
   var Provider$1 = function Provider(props) {
     var elements = props.elements,
-        children = props.children,
-        onConnect = props.onConnect;
+        children = props.children;
 
     var _useReducer = React.useReducer(reducer, initialState),
         _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -30181,11 +30180,12 @@
         dispatch(setEdges(edges));
       }
     });
-    var graphContext = {
-      state: state,
-      dispatch: dispatch,
-      onConnect: onConnect
-    };
+    var graphContext = React.useMemo(function () {
+      return {
+        state: state,
+        dispatch: dispatch
+      };
+    }, [state]);
     return React__default.createElement(GraphContext.Provider, {
       value: graphContext
     }, children);
@@ -33135,7 +33135,7 @@
     }, props));
   });
   TargetHandle.displayName = 'TargetHandle';
-  TargetHandle.whyDidYouRender = true;
+  TargetHandle.whyDidYouRender = false;
 
   var SourceHandle = React.memo(function (props) {
     var nodeId = React.useContext(NodeIdContext);

example/build/example.e31bb0bc.js

@@ -38125,8 +38125,7 @@ exports.GraphContext = GraphContext;
 
 var Provider = function Provider(props) {
   var elements = props.elements,
-      children = props.children,
-      onConnect = props.onConnect;
+      children = props.children;
 
   var _useReducer = (0, _react.useReducer)(_state.reducer, _state.initialState),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -38161,11 +38160,12 @@ var Provider = function Provider(props) {
       dispatch((0, _actions.setEdges)(edges));
     }
   });
-  var graphContext = {
-    state: state,
-    dispatch: dispatch,
-    onConnect: onConnect
-  };
+  var graphContext = (0, _react.useMemo)(function () {
+    return {
+      state: state,
+      dispatch: dispatch
+    };
+  }, [state]);
   return _react.default.createElement(GraphContext.Provider, {
     value: graphContext
   }, children);
@@ -41430,7 +41430,7 @@ var TargetHandle = (0, _react.memo)(function (props) {
   }, props));
 });
 TargetHandle.displayName = 'TargetHandle';
-TargetHandle.whyDidYouRender = true;
+TargetHandle.whyDidYouRender = false;
 var _default = TargetHandle;
 exports.default = _default;
 },{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../../ConnectionContext":"../src/ConnectionContext/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {

src/ConnectionLine/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, memo } from 'react';
 import cx from 'classnames';
 
 export default (props) => {
@@ -41,4 +41,4 @@ export default (props) => {
       />
     </g>
   );
-};
+};

src/GraphContext/index.js

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useReducer } from 'react';
+import React, { createContext, useEffect, useReducer, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash.isequal';
 
@@ -12,7 +12,6 @@ export const Provider = (props) => {
   const {
     elements,
     children,
-    onConnect
   } = props;
 
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -49,11 +48,10 @@ export const Provider = (props) => {
     }
   });
 
-  const graphContext = {
+  const graphContext = useMemo(() => ({
     state,
-    dispatch,
-    onConnect,
-  };
+    dispatch
+  }), [state]);
 
   return (
     <GraphContext.Provider

src/NodeRenderer/HandleTypes/TargetHandle.js

@@ -21,6 +21,6 @@ const TargetHandle = memo((props) => {
 });
 
 TargetHandle.displayName = 'TargetHandle';
-TargetHandle.whyDidYouRender = true;
+TargetHandle.whyDidYouRender = false;
 
 export default TargetHandle;