refactor(react-graph): use func comp

example/build/index.js

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61901" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "56024" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

example/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+import { unstable_trace as trace } from "scheduler/tracing";
 
 import SimpleGraph from './SimpleGraph';
 
-ReactDOM.render(
-  <SimpleGraph />,
-  document.getElementById('root')
+trace('initial render', performance.now(), () =>
+  render(<SimpleGraph />, document.getElementById('root'))
 );

package-lock.json

@@ -7014,26 +7014,24 @@
       "dev": true
     },
     "react": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
+      "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
+        "prop-types": "^15.6.2"
       }
     },
     "react-dom": {
-      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
-      "dev": true,
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
+      "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.6"
+        "scheduler": "^0.15.0"
       }
     },
     "react-draggable": {
@@ -7578,9 +7576,9 @@
       }
     },
     "scheduler": {
-      "version": "0.13.6",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
-      "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
+      "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"

package.json

@@ -11,9 +11,11 @@
     "d3-selection": "^1.4.0",
     "d3-zoom": "^1.7.3",
     "lodash.isequal": "^4.5.0",
-    "react": "^16.8.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-draggable": "^3.3.0",
-    "react-sizeme": "^2.6.7"
+    "react-sizeme": "^2.6.7",
+    "scheduler": "^0.15.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",
@@ -25,7 +27,6 @@
     "husky": "^3.0.0",
     "parcel-bundler": "^1.12.3",
     "postcss-nested": "^4.1.2",
-    "react-dom": "^16.8.6",
     "rollup": "^1.16.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-bundle-size": "^1.0.3",
@@ -36,7 +37,8 @@
     "rollup-plugin-serve": "^1.0.1"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.6",
     "prop-types": "^15.0.0-0"
   },
   "scripts": {

src/GraphView/index.js

@@ -18,7 +18,6 @@ import { useKeyPress } from '../hooks';
 
 const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
 
-
 const GraphView = memo((props) => {
   const zoomPane = useRef(null);
   const { state, dispatch } = useContext(GraphContext);

src/ReactGraph/index.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useMemo } from 'react';
 
 if (process.env.NODE_ENV !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -21,45 +21,41 @@ import { createEdgeTypes } from '../EdgeRenderer/utils';
 
 import '../style.css';
 
-class ReactGraph extends PureComponent {
-  constructor(props) {
-    super(props);
+const ReactGraph = (props) => {
+  const nodeTypes = useMemo(() => createNodeTypes(props.nodeTypes), []);
+  const edgeTypes = useMemo(() => createEdgeTypes(props.edgeTypes), []);
 
-    this.nodeTypes = createNodeTypes(props.nodeTypes);
-    this.edgeTypes = createEdgeTypes(props.edgeTypes);
-  }
+  const {
+    style, onElementClick, elements, children, onLoad,
+    onMove, onChange, onElementsRemove, onConnect,
+    onNodeDragStop, connectionLineType, connectionLineStyle
+  } = props;
 
-  render() {
-    const {
-      style, onElementClick, elements, children, onLoad,
-      onMove, onChange, onElementsRemove, onConnect, onNodeDragStop,
-      connectionLineType, connectionLineStyle
-    } = this.props;
+  return (
+    <div style={style} className="react-graph">
+      <Provider elements={elements}>
+        <GraphView
+          onLoad={onLoad}
+          onMove={onMove}
+          onChange={onChange}
+          onElementClick={onElementClick}
+          onNodeDragStop={onNodeDragStop}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          connectionLineType={connectionLineType}
+          connectionLineStyle={connectionLineStyle}
+          onConnect={onConnect}
+        />
+        <GlobalKeyHandler
+          onElementsRemove={onElementsRemove}
+        />
+        {children}
+      </Provider>
+    </div>
+  );
+};
 
-    return (
-      <div style={style} className="react-graph">
-        <Provider elements={elements}>
-          <GraphView
-            onLoad={onLoad}
-            onMove={onMove}
-            onChange={onChange}
-            onElementClick={onElementClick}
-            onNodeDragStop={onNodeDragStop}
-            nodeTypes={this.nodeTypes}
-            edgeTypes={this.edgeTypes}
-            connectionLineType={connectionLineType}
-            connectionLineStyle={connectionLineStyle}
-            onConnect={onConnect}
-          />
-          <GlobalKeyHandler
-            onElementsRemove={onElementsRemove}
-          />
-          {children}
-        </Provider>
-      </div>
-    );
-  }
-}
+ReactGraph.displayName = 'ReactGraph';
 
 ReactGraph.defaultProps = {
   onElementClick: () => {},