From 37554687bec56e334bed0a46dfe587044bd94969 Mon Sep 17 00:00:00 2001
From: Anes Belfodil <ans.belfodil@gmail.com>
Date: Thu, 18 Jun 2020 19:32:52 -0400
Subject: [PATCH 1/2] Refactor D3Component to be a functional component

---
 polydodo/src/components/d3component.js | 28 +++++++-------------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/polydodo/src/components/d3component.js b/polydodo/src/components/d3component.js
index 245bb0e7..e8da3a08 100644
--- a/polydodo/src/components/d3component.js
+++ b/polydodo/src/components/d3component.js
@@ -1,23 +1,9 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { useEffect, useRef } from 'react';
 
-class D3Component extends React.Component {
-  static propTypes = {
-    callback: PropTypes.func.isRequired,
-  }
+const D3Component = ({ callback }) => {
+    const ref = useRef(null);
+    useEffect(() => callback(ref));
+    return <svg ref={ref} />;
+};
 
-  componentDidMount() {
-    const { callback } = this.props;
-    callback(this.svg);
-  }
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  render() {
-    return (<svg ref={ref => this.svg = ref } />);
-  }
-}
-
-export default D3Component;
\ No newline at end of file
+export default D3Component;

From 44d8864fc5d5936b067929a1a224b99ed4d25bf9 Mon Sep 17 00:00:00 2001
From: William Harvey <william.harvey@polymtl.ca>
Date: Sun, 21 Jun 2020 14:40:18 -0400
Subject: [PATCH 2/2] Use current attribute on React's ref to access svg el &&
 avoid component update.

---
 polydodo/src/components/d3component.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/polydodo/src/components/d3component.js b/polydodo/src/components/d3component.js
index e8da3a08..3a92e6fa 100644
--- a/polydodo/src/components/d3component.js
+++ b/polydodo/src/components/d3component.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from "react";
 
-const D3Component = ({ callback }) => {
-    const ref = useRef(null);
-    useEffect(() => callback(ref));
-    return <svg ref={ref} />;
-};
+const D3Component = React.memo(({ callback }) => {
+  const ref = useRef();
+  useEffect(() => callback(ref.current));
+  return <svg ref={ref} />;
+});
 
 export default D3Component;