use react 18 concurrent mode

packages/docs-new/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "express": "^4.17.2",
     "reacord": "workspace:*",
-    "react": "^17.0.2",
+    "react": "^18.0.0-rc.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0-rc.0",
     "react-head": "^3.4.0",
     "react-router-dom": "^6.2.1"
   },

packages/docs-new/src/entry.client.tsx

@@ -1,13 +1,18 @@
-import { hydrate } from "react-dom"
+import { createRoot } from "react-dom"
 import { HeadProvider } from "react-head"
 import { ReactLocation } from "react-location"
 import { App } from "./app"
 
 const location = new ReactLocation()
 
-hydrate(
+createRoot(document.querySelector("#app")!).render(
   <HeadProvider>
     <App location={location} />
   </HeadProvider>,
-  document.querySelector("#app"),
 )
+
+declare module "react-dom" {
+  export function createRoot(element: Element): {
+    render(element: React.ReactNode): void
+  }
+}

pnpm-lock.yaml

@@ -126,8 +126,8 @@ importers:
       express: ^4.17.2
       postcss: ^8.4.5
       reacord: workspace:*
-      react: ^17.0.2
+      react: ^18.0.0-rc.0
-      react-dom: ^17.0.2
+      react-dom: ^18.0.0-rc.0
       react-head: ^3.4.0
       react-location: ^3.3.0
       react-router-dom: ^6.2.1
@@ -140,10 +140,10 @@ importers:
     dependencies:
       express: 4.17.2
       reacord: link:../reacord
-      react: 17.0.2
+      react: 18.0.0-rc.0
-      react-dom: 17.0.2_react@17.0.2
+      react-dom: 18.0.0-rc.0_react@18.0.0-rc.0
-      react-head: 3.4.0_react-dom@17.0.2+react@17.0.2
+      react-head: 3.4.0_757a802188413a36d4f24237d13b8e90
-      react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
+      react-router-dom: 6.2.1_757a802188413a36d4f24237d13b8e90
     devDependencies:
       '@mapbox/rehype-prism': 0.8.0
       '@tailwindcss/typography': 0.5.0_tailwindcss@3.0.8
@@ -157,7 +157,7 @@ importers:
       compression: 1.7.4
       esno: 0.13.0_typescript@4.5.4
       postcss: 8.4.5
-      react-location: 3.3.0_react-dom@17.0.2+react@17.0.2
+      react-location: 3.3.0_757a802188413a36d4f24237d13b8e90
       rehype-highlight: 5.0.2
       remark-frontmatter: 4.0.1
       tailwindcss: 3.0.8_cefe482e8d38053bbf3d5815e0c551b3
@@ -8138,6 +8138,17 @@ packages:
       scheduler: 0.20.2
     dev: false
 
+  /react-dom/18.0.0-rc.0_react@18.0.0-rc.0:
+    resolution: {integrity: sha512-tdD1n0svTndHBQvVAq/f2Kx7FgQ30CpSLp87/neQKAHPW5WtdgW1sBSwmFAcMQOrmstTuP0M+zRlH86f9kMX/A==}
+    peerDependencies:
+      react: ^18.0.0-rc.0
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react: 18.0.0-rc.0
+      scheduler: 0.21.0-rc.0-next-f2a59df48-20211208
+    dev: false
+
   /react-focus-lock/2.7.1_b08e3c15324cbe90a6ff8fcd416c932c:
     resolution: {integrity: sha512-ImSeVmcrLKNMqzUsIdqOkXwTVltj79OPu43oT8tVun7eIckA4VdM7UmYUFo3H/UC2nRVgagMZGFnAOQEDiDYcA==}
     peerDependencies:
@@ -8175,15 +8186,15 @@ packages:
       use-sidecar: 1.0.5_react@17.0.2
     dev: false
 
-  /react-head/3.4.0_react-dom@17.0.2+react@17.0.2:
+  /react-head/3.4.0_757a802188413a36d4f24237d13b8e90:
     resolution: {integrity: sha512-T+a+WTN2lQECle3KdUBTnXMpjzOTDRFS1f2jCLP9H64XBXgayxadoLkzWSiJD793zE8IMWzQ8xKe3V573es9NQ==}
     peerDependencies:
       react: '>=16.3'
       react-dom: '>=16.3'
     dependencies:
       '@babel/runtime': 7.16.5
-      react: 17.0.2
+      react: 18.0.0-rc.0
-      react-dom: 17.0.2_react@17.0.2
+      react-dom: 18.0.0-rc.0_react@18.0.0-rc.0
     dev: false
 
   /react-is/16.13.1:
@@ -8193,7 +8204,7 @@ packages:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
 
-  /react-location/3.3.0_react-dom@17.0.2+react@17.0.2:
+  /react-location/3.3.0_757a802188413a36d4f24237d13b8e90:
     resolution: {integrity: sha512-0ME2sVcldYcTGB4DxbD+00wuXHY9NeACjhub3+MKOsBxnTSMQ5P2XWZZwql5IyL9Fj9IL1CjdUnoT4hCL1bCCQ==}
     peerDependencies:
       react: '>=16'
@@ -8203,8 +8214,8 @@ packages:
       core-js: 3.20.1
       fast-async: 7.0.6
       history: 5.2.0
-      react: 17.0.2
+      react: 18.0.0-rc.0
-      react-dom: 17.0.2_react@17.0.2
+      react-dom: 18.0.0-rc.0_react@18.0.0-rc.0
       ts-toolbelt: 9.6.0
     dev: true
 
@@ -8260,6 +8271,18 @@ packages:
       use-sidecar: 1.0.5_react@17.0.2
     dev: false
 
+  /react-router-dom/6.2.1_757a802188413a36d4f24237d13b8e90:
+    resolution: {integrity: sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      history: 5.2.0
+      react: 18.0.0-rc.0
+      react-dom: 18.0.0-rc.0_react@18.0.0-rc.0
+      react-router: 6.2.1_react@18.0.0-rc.0
+    dev: false
+
   /react-router-dom/6.2.1_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==}
     peerDependencies:
@@ -8281,6 +8304,15 @@ packages:
       react: 17.0.2
     dev: false
 
+  /react-router/6.2.1_react@18.0.0-rc.0:
+    resolution: {integrity: sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      history: 5.2.0
+      react: 18.0.0-rc.0
+    dev: false
+
   /react-style-singleton/2.1.1_b08e3c15324cbe90a6ff8fcd416c932c:
     resolution: {integrity: sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==}
     engines: {node: '>=8.5.0'}
@@ -8305,6 +8337,14 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
 
+  /react/18.0.0-rc.0:
+    resolution: {integrity: sha512-PawosMBgF8k5Nlc3++ibzjFqPvo1XKv80MNtVYqz3abHHB2w3IpU65sSdSmBd2ooCwVhcp9b1vkx/twqhakNtA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+    dev: false
+
   /read-package-json-fast/2.0.3:
     resolution: {integrity: sha512-W/BKtbL+dUjTuRL2vziuYhp76s5HZ9qQhd/dKfWIZveD0O40453QNyZhC0e63lqZrAQ4jiOapVoeJ7JrszenQQ==}
     engines: {node: '>=10'}
@@ -8755,6 +8795,13 @@ packages:
       object-assign: 4.1.1
     dev: false
 
+  /scheduler/0.21.0-rc.0-next-f2a59df48-20211208:
+    resolution: {integrity: sha512-x0oLd3YIih9GHqWTaFYejVe6Au+4TadOWZciAq8m4+Fuo5qCi4/3M35a9irVSIP3+qcg/fCqHKJETT9G0ejD1A==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+    dev: false
+
   /section-matter/1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}