Fixes needless custom component recreation (#1195) (#1224)

docs/source/about/changelog.rst

@@ -23,6 +23,7 @@ Unreleased
 - :pull:`1118` - `module_from_template` is broken with a recent release of `requests`
 - :pull:`1131` - `module_from_template` did not work when using Flask backend
 - :pull:`1200` - Fixed `UnicodeDecodeError` when using `reactpy.web.export`
+- :pull:`1224` - Fixes needless unmounting of JavaScript components during each ReactPy render.
 
 **Added**
 

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(() => {

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()
   };
 }