Fixes needless custom component recreation (#1195)

Author: shawncrawley

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