From 97878c3881c7f723a065af568779a0137ab69bc0 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 28 Mar 2019 06:56:31 -0400
Subject: [PATCH] Updating Render to use hooks

---
 src/components/Render/index.js | 60 +++++++++++++++-------------------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/components/Render/index.js b/src/components/Render/index.js
index 856d4d5..a866804 100644
--- a/src/components/Render/index.js
+++ b/src/components/Render/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import nodeTypes from 'rendering/types';
@@ -40,48 +40,40 @@ const render = (data, key) => {
   </React.Fragment>;
 };
 
-class Render extends React.PureComponent {
-  static propTypes = {
-    data: PropTypes.object.isRequired,
-    onRender: PropTypes.func.isRequired
-  }
+const Render = ({ data, onRender }) => {
+  const svgContainer = useRef();
 
-  svgContainer = React.createRef()
-
-  componentDidMount() {
-    this.provideSVGData();
-  }
-
-  componentDidUpdate() {
-    this.provideSVGData();
-  }
-
-  provideSVGData() {
-    if (!this.svgContainer.current) {
+  const provideSVGData = useCallback(() => {
+    if (!svgContainer.current) {
       return;
     }
 
-    const svg = this.svgContainer.current.querySelector('svg');
-    this.props.onRender({
+    const svg = svgContainer.current.querySelector('svg');
+    onRender({
       svg: svg.outerHTML,
       width: Number(svg.getAttribute('width')),
       height: Number(svg.getAttribute('height'))
     });
-  }
+  }, [svgContainer, onRender]);
 
-  render() {
-    const { data } = this.props;
+  useEffect(() => {
+    provideSVGData();
+  }, [provideSVGData]);
 
-    return <div className={ style.render } ref={ this.svgContainer }>
-      { render({
-        ...data,
-        props: {
-          ...data.props,
-          onReflow: this.provideSVGData
-        }
-      }) }
-    </div>;
-  }
-}
+  return <div className={ style.render } ref={ svgContainer }>
+    { render({
+      ...data,
+      props: {
+        ...data.props,
+        onReflow: provideSVGData
+      }
+    }) }
+  </div>;
+};
+
+Render.propTypes = {
+  data: PropTypes.object.isRequired,
+  onRender: PropTypes.func.isRequired
+};
 
 export default Render;