From e1150aae0fdf50a83655abc06ec2557dbdcf92d7 Mon Sep 17 00:00:00 2001
From: Shawn Crawley <shawn.crawley@noaa.gov>
Date: Thu, 18 Jul 2024 11:03:34 -0600
Subject: [PATCH] Fixes needless custom component recreation (#1195)

---
 src/js/packages/@reactpy/client/src/components.tsx | 4 ++--
 src/py/reactpy/reactpy/web/templates/react.js      | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/js/packages/@reactpy/client/src/components.tsx b/src/js/packages/@reactpy/client/src/components.tsx
index 728c4cec7..2319f81c7 100644
--- a/src/js/packages/@reactpy/client/src/components.tsx
+++ b/src/js/packages/@reactpy/client/src/components.tsx
@@ -177,7 +177,7 @@ function useForceUpdate() {
 
 function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
   const vdomImportSource = model.importSource;
-
+  const vdomImportSourceJsonString = JSON.stringify(vdomImportSource);
   const mountPoint = useRef<HTMLElement>(null);
   const client = React.useContext(ClientContext);
   const [binding, setBinding] = useState<ImportSourceBinding | null>(null);
@@ -203,7 +203,7 @@ function useImportSource(model: ReactPyVdom): MutableRefObject<any> {
         binding.unmount();
       }
     };
-  }, [client, vdomImportSource, setBinding, mountPoint.current]);
+  }, [client, vdomImportSourceJsonString, setBinding, mountPoint.current]);
 
   // this effect must run every time in case the model has changed
   useEffect(() => {
diff --git a/src/py/reactpy/reactpy/web/templates/react.js b/src/py/reactpy/reactpy/web/templates/react.js
index 5c6a45743..366be4fd0 100644
--- a/src/py/reactpy/reactpy/web/templates/react.js
+++ b/src/py/reactpy/reactpy/web/templates/react.js
@@ -17,11 +17,12 @@ export default ({ children, ...props }) => {
 };
 
 export function bind(node, config) {
+  const root = ReactDOM.createRoot(node);
   return {
     create: (component, props, children) =>
       React.createElement(component, wrapEventHandlers(props), ...children),
-    render: (element) => ReactDOM.render(element, node),
-    unmount: () => ReactDOM.unmountComponentAtNode(node),
+    render: (element) => root.render(element),
+    unmount: () => root.unmount()
   };
 }