fix(jupyter): simplify resize logic and add WeakMap for root instances

- Simplify handleResize to directly set dimensions without stale state comparison
- Add WeakMap to store and reuse createRoot instances, preventing memory leaks
- Keep minimal change approach for viewport sizing fix

Author: yharby

bindings/kepler.gl-jupyter/js/lib/keplergl/components/app.js

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useEffect, useState, useRef} from 'react';
+import {useEffect, useState, useRef} from 'react';
 import styled from 'styled-components';
 const ReactHelmet = require('react-helmet');
 const Helmet = ReactHelmet ? ReactHelmet.Helmet : null;
@@ -58,15 +58,12 @@ function App() {
 
     const width = rootElm.current.offsetWidth;
     const height = rootElm.current.offsetHeight;
-    const dimensionToSet = {
-      ...(width && width !== windowDimension.width ? {width} : {}),
-      ...(height && height !== windowDimension.height ? {height} : {})
-    };
-
-    setDimension(dimensionToSet);
+    if (width && height) {
+      setDimension({width, height});
+    }
   };
 
-  // in Jupyter Lab,  parent component has transition when window resize.
+  // in Jupyter Lab, parent component has transition when window resize.
   // need to delay call to get the final parent width,
   const resizeDelay = () => window.setTimeout(handleResize, 500);
 

bindings/kepler.gl-jupyter/js/lib/keplergl/components/root.js

@@ -1,13 +1,16 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Provider} from 'react-redux';
 import App from './app';
 import Window from 'global/window';
 import {addDataConfigToKeplerGl} from '../kepler.gl';
 
+// Store root instances to avoid creating multiple roots for the same element
+const rootInstances = new WeakMap();
+
 // Separate component to handle data loading after mount
 function DataLoader({store, onRenderComplete}) {
   const hasLoadedData = useRef(false);
@@ -30,8 +33,13 @@ function DataLoader({store, onRenderComplete}) {
 }
 
 function renderRoot({id, store, ele, onRenderComplete}) {
-  // Use React 18 createRoot API
-  const root = createRoot(ele);
+  // Use React 18 createRoot API - reuse existing root if available
+  let root = rootInstances.get(ele);
+  if (!root) {
+    root = createRoot(ele);
+    rootInstances.set(ele, root);
+  }
+
   root.render(
     <Provider store={store}>
       <DataLoader store={store} onRenderComplete={onRenderComplete} />