fix: useEffect cleanup not executed when re-executing cell (#48)

src/widget.tsx

@@ -22,6 +22,7 @@ import { MODULE_NAME, MODULE_VERSION } from './version';
 // import 'es-module-shims';
 import { transform } from 'sucrase';
 import { ErrorBoundary } from './components';
+import { Root } from "react-dom/client";
 
 
 // @ts-ignore
@@ -108,6 +109,8 @@ export class ReactModel extends DOMWidgetModel {
 
 
 export class ReactView extends DOMWidgetView {
+  private root: Root | null = null;
+
   render() {
     this.el.classList.add('jupyter-react-widget');
     // using babel is a bit of an art, so leaving this code for if we 
@@ -272,12 +275,16 @@ export class ReactView extends DOMWidgetView {
       }
     }
     if(this.model.get("react_version") === 18) {
-      const root = ReactDOMClient.createRoot(this.el);
-      root.render(<ErrorBoundary><Component></Component></ErrorBoundary>);
+      this.root = ReactDOMClient.createRoot(this.el);
+      this.root.render(<ErrorBoundary><Component></Component></ErrorBoundary>);
       } else {
         // @ts-ignore
         // ReactDOM16.render(<Component></Component>, this.el);
 
     }
   }
+
+  remove() {
+    this.root?.unmount();
+  }
 }