[Beta] Upgrade React Types & Fix resulting type issues (#4694)

* upgrade react types

* fix type errors after upgrade

beta/package.json

@@ -48,8 +48,8 @@
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "asyncro": "^3.0.0",

beta/src/components/Layout/useMediaQuery.tsx

@@ -7,7 +7,7 @@ import {useState, useCallback, useEffect} from 'react';
 const useMediaQuery = (width: number) => {
   const [targetReached, setTargetReached] = useState(false);
 
-  const updateTarget = useCallback((e) => {
+  const updateTarget = useCallback((e: MediaQueryListEvent) => {
     if (e.matches) {
       setTargetReached(true);
     } else {

beta/src/components/MDX/Sandpack/DownloadButton.tsx

@@ -12,6 +12,7 @@ let supportsImportMap: boolean | void;
 function useSupportsImportMap() {
   function subscribe() {
     // It never updates.
+    return () => {};
   }
   function getCurrentValue() {
     if (supportsImportMap === undefined) {
@@ -24,7 +25,7 @@ function useSupportsImportMap() {
   function getServerSnapshot() {
     return false;
   }
-  // @ts-ignore
+
   return React.useSyncExternalStore(
     subscribe,
     getCurrentValue,

beta/src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -11,7 +11,7 @@ import {createFileMap} from './createFileMap';
 import type {SandpackSetup} from '@codesandbox/sandpack-react';
 
 type SandpackProps = {
-  children: React.ReactChildren;
+  children: React.ReactNode;
   autorun?: boolean;
   setup?: SandpackSetup;
   showDevTools?: boolean;

beta/src/pages/_app.tsx

@@ -12,7 +12,9 @@ import '../styles/index.css';
 import '../styles/sandpack.css';
 import '@codesandbox/sandpack-react/dist/index.css';
 
-const EmptyAppShell: React.FC = ({children}) => <>{children}</>;
+const EmptyAppShell = ({children}: {children: React.ReactNode}) => (
+  <>{children}</>
+);
 
 if (typeof window !== 'undefined') {
   if (process.env.NODE_ENV === 'production') {

beta/src/utils/toCommaSeparatedList.tsx

@@ -4,18 +4,18 @@
 
 import React from 'react';
 
-const addString = (list: React.ReactNodeArray, string: string) =>
+const addString = (list: React.ReactNode[], string: string) =>
   list.push(<span key={`${list.length}-${string}`}>{string}</span>);
 
 function toCommaSeparatedList<Item>(
   array: Item[],
-  renderCallback: (item: Item, index: number) => void
-): Array<any> {
+  renderCallback: (item: Item, index: number) => React.ReactNode
+): React.ReactNode[] {
   if (array.length <= 1) {
     return array.map(renderCallback);
   }
 
-  const list: any = [];
+  const list: React.ReactNode[] = [];
 
   array.forEach((item, index) => {
     if (index === array.length - 1) {

beta/yarn.lock

@@ -912,12 +912,12 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/react-dom@^16.9.8":
-  version "16.9.14"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.14.tgz#674b8f116645fe5266b40b525777fc6bb8eb3bcd"
-  integrity sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A==
+"@types/react-dom@^18.0.5":
+  version "18.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
+  integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "*"
 
 "@types/react@*":
   version "17.0.38"
@@ -928,10 +928,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^16", "@types/react@^16.9.46":
-  version "16.14.21"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
-  integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
+"@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"