feat(ReactAdaptor): upgrade react to react 18

src/svelte-interface/components/ColourPicker.tsx

@@ -25,18 +25,22 @@ const defaultPresets = [
 ];
 
 function Picker() {
-  const [customThemeColor, setCustomThemeColor] = useState(() => {
+  const [customThemeColor, setCustomThemeColor] = useState<string | null>(null);
-    return settingsState.selectedColor
+  const [presets, setPresets] = useState<string[]>(defaultPresets);
-  });
+
-  const [presets, setPresets] = useState(() => {
+  useEffect(() => {
+    setCustomThemeColor(settingsState.selectedColor);
+    setPresets(() => {
       const savedPresets = localStorage.getItem('colorPickerPresets');
       return savedPresets ? JSON.parse(savedPresets) : defaultPresets;
     });
+  }, []);
 
 
   useEffect(() => {
     // on component dismount, save the presets to local storage
     return () => {
+      if (customThemeColor) {
         // Check if the selected color is already in the presets
         const existingIndex = presets.indexOf(customThemeColor);
 
@@ -56,14 +60,17 @@ function Picker() {
         setPresets(updatedPresets);
         localStorage.setItem('colorPickerPresets', JSON.stringify(updatedPresets));
       }
+    }
   }, []);
 
   useEffect(() => {
+    if (customThemeColor) {
       settingsState.selectedColor = customThemeColor;
+    }
   }, [customThemeColor]);
 
   return (
-    <ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={customThemeColor} onChange={setCustomThemeColor} />
+    <ColorPicker disableDarkMode={true} presets={presets} hideInputs={true} value={customThemeColor ?? ''} onChange={setCustomThemeColor} />
   );
 }
 

src/svelte-interface/components/utils/ReactAdapter.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
   import React from "react";
-  import ReactDOM from "react-dom";
+  import { createRoot } from "react-dom/client";
   import { onDestroy, onMount } from "svelte";
 
   const e = React.createElement;
   let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
 
   onMount(() => {
     const { el, children, class: _, ...props } = $$props;
     try {
-      ReactDOM.render(e(el, props, children), container);
+      root = createRoot(container);
+      root.render(e(el, props, children));
     } catch (err) {
       console.warn(`react-adapter failed to mount.`, { err });
     }
@@ -17,7 +19,9 @@
 
   onDestroy(() => {
     try {
-      ReactDOM.unmountComponentAtNode(container);
+      if (root) {
+        root.unmount();
+      }
     } catch (err) {
       console.warn(`react-adapter failed to unmount.`, { err });
     }