feat(react): add "support" for react18 (#3520)

Author: TkDodo

package.json

@@ -70,7 +70,7 @@
     "match-sorter": "^6.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {

src/react/Hydrate.tsx

@@ -23,13 +23,10 @@ export function useHydrate(state: unknown, options?: HydrateOptions) {
 export interface HydrateProps {
   state?: unknown
   options?: HydrateOptions
+  children?: React.ReactNode
 }
 
-export const Hydrate: React.FC<HydrateProps> = ({
-  children,
-  options,
-  state,
-}) => {
+export const Hydrate = ({ children, options, state }: HydrateProps) => {
   useHydrate(state, options)
-  return children as React.ReactElement<any>
+  return children as React.ReactElement
 }

src/react/QueryClientProvider.tsx

@@ -44,13 +44,14 @@ export const useQueryClient = () => {
 export interface QueryClientProviderProps {
   client: QueryClient
   contextSharing?: boolean
+  children?: React.ReactNode
 }
 
-export const QueryClientProvider: React.FC<QueryClientProviderProps> = ({
+export const QueryClientProvider = ({
   client,
   contextSharing = false,
   children,
-}) => {
+}: QueryClientProviderProps): JSX.Element => {
   React.useEffect(() => {
     client.mount()
     return () => {

src/react/QueryErrorResetBoundary.tsx

@@ -38,9 +38,9 @@ export interface QueryErrorResetBoundaryProps {
     | React.ReactNode
 }
 
-export const QueryErrorResetBoundary: React.FC<QueryErrorResetBoundaryProps> = ({
+export const QueryErrorResetBoundary = ({
   children,
-}) => {
+}: QueryErrorResetBoundaryProps) => {
   const value = React.useMemo(() => createValue(), [])
   return (
     <QueryErrorResetBoundaryContext.Provider value={value}>

src/react/tests/utils.tsx

@@ -67,9 +67,12 @@ export const expectType = <T,>(_: T): void => undefined
 export const expectTypeNotAny = <T,>(_: 0 extends 1 & T ? never : T): void =>
   undefined
 
-export const Blink: React.FC<{ duration: number }> = ({
+export const Blink = ({
   duration,
   children,
+}: {
+  duration: number
+  children: React.ReactNode
 }) => {
   const [shouldShow, setShouldShow] = React.useState<boolean>(true)