diff --git a/dist/ChartContainer.js b/dist/ChartContainer.js
index 473a110..ad36a8f 100644
--- a/dist/ChartContainer.js
+++ b/dist/ChartContainer.js
@@ -1,4 +1,4 @@
-
+"use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
diff --git a/dist/ChartNode.js b/dist/ChartNode.js
index 1765276..a562f14 100644
--- a/dist/ChartNode.js
+++ b/dist/ChartNode.js
@@ -1,4 +1,4 @@
-
+"use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -320,6 +320,11 @@ var ChartNode = function ChartNode(_ref) {
     };
   }();
 
+  var Node = (0, _react.useCallback)(function () {
+    return NodeTemplate({
+      nodeData: datasource
+    });
+  }, [datasource]);
   return /*#__PURE__*/_react.default.createElement("li", {
     className: "oc-hierarchy"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -334,9 +339,7 @@ var ChartNode = function ChartNode(_ref) {
     onDrop: dropHandler,
     onMouseEnter: addArrows,
     onMouseLeave: removeArrows
-  }, NodeTemplate ? /*#__PURE__*/_react.default.createElement(NodeTemplate, {
-    nodeData: datasource
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, NodeTemplate ? Node() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "oc-heading"
   }, datasource.relationship && datasource.relationship.charAt(2) === "1" && /*#__PURE__*/_react.default.createElement("i", {
     className: "oci oci-leader oc-symbol"
diff --git a/src/components/ChartNode.js b/src/components/ChartNode.js
index 71bd388..e495915 100644
--- a/src/components/ChartNode.js
+++ b/src/components/ChartNode.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { dragNodeService, selectNodeService } from "./service";
 import "./ChartNode.css";
@@ -239,6 +239,8 @@ const ChartNode = ({
     onDropNode && onDropNode(data);
   };
 
+  const Node = useCallback(() => NodeTemplate({ nodeData: datasource }), [datasource])
+
   return (
     <li className="oc-hierarchy">
       <div
@@ -254,8 +256,7 @@ const ChartNode = ({
         onMouseEnter={addArrows}
         onMouseLeave={removeArrows}
       >
-        {/* nodeData={datasource} */}
-        {NodeTemplate ? NodeTemplate({ nodeData: datasource }) : (
+        {NodeTemplate ? Node() : (
           <>
             <div className="oc-heading">
               {datasource.relationship &&