upgrade Recoil to latest and React 18

Author: akutruff

frameworks/keyed/react-recoil/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-react-recoil",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React Recoil demo",
   "main": "index.js",
   "js-framework-benchmark": {
@@ -31,8 +31,8 @@
     "webpack-cli": "3.3.4"
   },
   "dependencies": {
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "recoil": "0.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "recoil": "0.7.5"
   }
-}
+}

frameworks/keyed/react-recoil/package.json

@@ -6,7 +6,7 @@ import {
   useSetRecoilState,
   useRecoilValue,
 } from "recoil";
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 
 const random = (max) => Math.round(Math.random() * 1000) % max;
 
@@ -25,9 +25,8 @@ const buildData = (count) => {
   for (let i = 0; i < count; i++) {
     data[i] = {
       id: nextId++,
-      label: `${A[random(A.length)]} ${C[random(C.length)]} ${
-        N[random(N.length)]
-      }`,
+      label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]
+        }`,
     };
   }
 
@@ -138,15 +137,15 @@ const Jumbotron = memo(
       setAppState(({ data, selected }) =>
         data.length > 998
           ? {
-              data: [
-                data[0],
-                data[998],
-                ...data.slice(2, 998),
-                data[1],
-                data[999],
-              ],
-              selected,
-            }
+            data: [
+              data[0],
+              data[998],
+              ...data.slice(2, 998),
+              data[1],
+              data[999],
+            ],
+            selected,
+          }
           : state
       );
     }, [setAppState]);
@@ -203,9 +202,9 @@ const Main = () => {
   );
 };
 
-render(
+const root = createRoot(document.getElementById('main'));
+root.render(
   <RecoilRoot>
     <Main />
-  </RecoilRoot>,
-  document.getElementById("main")
-);
+  </RecoilRoot>
+);