Fix React 18 compatibility (#1104)

Co-authored-by: delucis <[email protected]>

Author: mbrinkl

examples/react-web/package.json

@@ -21,8 +21,8 @@
     "@babel/preset-react": "^7.13.13",
     "chess.js": "^0.11.0",
     "parcel-plugin-svelte": "^4.0.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",
     "superagent": "^6.1.0",
     "svelte": "^3.37.0",

examples/react-web/src/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { App } from './app';
 
-render(
-  <App />,
-  document.getElementById('test') || document.createElement('div')
+const container =
+  document.getElementById('test') || document.createElement('div');
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );

src/client/debug/main/Main.svelte

@@ -3,6 +3,7 @@
   export let clientManager;
   export let ToggleVisibility;
 
+  import { onDestroy } from 'svelte';
   import JSONTree from 'svelte-json-tree-auto/src/Root.svelte';
   import ClientSwitcher from './ClientSwitcher.svelte';
   import Move from './Move.svelte';
@@ -25,10 +26,12 @@
   let { playerID, moves, events } = client;
   let ctx = {};
   let G = {};
-  client.subscribe((state) => {
+  const unsubscribe = client.subscribe((state) => {
     if (state) ({ G, ctx } = state);
     ({ playerID, moves, events } = client);
   });
+
+  onDestroy(unsubscribe);
 </script>
 
 <style>