Merge branch 'react-18-zustand' of https://github.com/akutruff/js-framework-benchmark into akutruff-react-18-zustand

Author: krausest

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

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-react-zustand",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React Zustand 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",
-    "zustand": "^3.6.7"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "zustand": "4.1.1"
   }
-}
+}

frameworks/keyed/react-zustand/package.json

@@ -1,5 +1,5 @@
 import { memo, useCallback } from "react"
-import { render } from "react-dom"
+import { createRoot } from 'react-dom/client';
 import create from "zustand"
 import shallow from "zustand/shallow"
 
@@ -107,9 +107,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)]
+				}`,
 		}
 	}
 
@@ -231,4 +230,6 @@ const Main = () => {
 	)
 }
 
-render(<Main />, document.getElementById("main"))
+const container = document.getElementById('main');
+const root = createRoot(container);
+root.render(<Main />);