fix(provider): handle changed nodes and edges

src/GraphContext/index.js

@@ -1,6 +1,8 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { zoomIdentity } from 'd3-zoom';
+import isEqual from 'lodash.isequal';
+
 import { getBoundingBox } from '../graph-utils';
 
 export const GraphContext = createContext({});
@@ -22,6 +24,19 @@ export const Provider = (props) => {
   const [edges, setEdges] = useState(initEdges);
   const [transform, setTransform] = useState({ x: 0, y: 0, k: 1 });
 
+  useEffect(() => {
+    const nodesChanged = !isEqual(nodes, props.nodes);
+    const edgesChanged = !isEqual(edges, props.edges);
+
+    if (nodesChanged) {
+      setNodes(props.nodes);
+    }
+
+    if (edgesChanged) {
+      setEdges(props.edges);
+    }
+  });
+
   const updateNodeData = (nodeId, updateData) => {
     const updatedNodes = nodes.map((n) => {
       if (n.data.id === nodeId) {

src/index.js

@@ -14,44 +14,14 @@ const GraphWrapper = styled.div`
 `;
 
 class ReactGraph extends PureComponent {
-  constructor(props) {
-    super();
-
-    const { elements } = props;
-
-    this.state = {
-      ...separateElements(elements)
-    };
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { elements } = this.props;
-    const { nodes, edges } = separateElements(elements);
-    const nodesChanged = !isEqual(nodes, prevState.nodes);
-    const edgesChanged = !isEqual(edges, prevState.edges);
-
-    if (!nodesChanged && !edgesChanged) {
-      return false;
-    }
-
-    if (nodesChanged) {
-      this.setState({ nodes });
-    }
-
-    if (edgesChanged) {
-      this.setState({ edges });
-    }
-  }
-
   render() {
     const {
-      style, onNodeClick, children, onLoad, onMove
-    } = this.props;
-    const { nodes, edges } = this.state;
+      style, onNodeClick, children, onLoad, onMove, elements
+		} = this.props;
 
     return (
       <GraphWrapper style={style}>
-        <Provider nodes={nodes} edges={edges} onNodeClick={onNodeClick}>
+        <Provider {...separateElements(elements)} onNodeClick={onNodeClick}>
           <GraphView onLoad={onLoad} onMove={onMove} />
           {children}
         </Provider>