feat(emotion): use React 18 (#286)

Author: RobinClowers

emotion/app/entry.client.tsx

@@ -1,7 +1,7 @@
 import { CacheProvider } from "@emotion/react";
 import { RemixBrowser } from "@remix-run/react";
 import * as React from "react";
-import { hydrate } from "react-dom";
+import { hydrateRoot } from "react-dom/client";
 
 import ClientStyleContext from "~/styles/client.context";
 import createEmotionCache from "~/styles/createEmotionCache";
@@ -24,9 +24,9 @@ function ClientCacheProvider({ children }: ClientCacheProviderProps) {
   );
 }
 
-hydrate(
+hydrateRoot(
+  document,
   <ClientCacheProvider>
     <RemixBrowser />
   </ClientCacheProvider>,
-  document,
 );

emotion/package.json

@@ -15,14 +15,14 @@
     "@remix-run/node": "~1.14.2",
     "@remix-run/react": "~1.14.2",
     "@remix-run/serve": "~1.14.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@remix-run/dev": "~1.14.2",
     "@remix-run/eslint-config": "~1.14.2",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "eslint": "^8.27.0",
     "typescript": "^4.8.4"
   },