fix(react-form): remove useId and adjust types for React 17 compatibility (#1850)

Co-authored-by: LeCarbonator <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

.changeset/witty-chefs-greet.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-form': patch
+---
+
+Remove useId for react 17 user compatibility, replaced with uuid

packages/react-form/src/createFormHook.tsx

@@ -17,8 +17,8 @@ import type {
 import type {
   ComponentType,
   Context,
+  FunctionComponent,
   PropsWithChildren,
-  ReactNode,
 } from 'react'
 import type { FieldComponent } from './useField'
 import type { ReactFormExtendedApi } from './useForm'
@@ -191,7 +191,10 @@ export type AppFieldExtendedReactFormApi<
       TSubmitMeta,
       NoInfer<TFieldComponents>
     >
-    AppForm: ComponentType<PropsWithChildren>
+    AppForm: ComponentType<
+      // PropsWithChildren<P> is not optional in React 17
+      PropsWithChildren<{}>
+    >
   }
 
 export interface WithFormProps<
@@ -226,8 +229,8 @@ export interface WithFormProps<
   > {
   // Optional, but adds props to the `render` function outside of `form`
   props?: TRenderProps
-  render: (
-    props: PropsWithChildren<
+  render: FunctionComponent<
+    PropsWithChildren<
       NoInfer<TRenderProps> & {
         form: AppFieldExtendedReactFormApi<
           TFormData,
@@ -246,8 +249,8 @@ export interface WithFormProps<
           TFormComponents
         >
       }
-    >,
-  ) => ReactNode
+    >
+  >
 }
 
 export interface WithFieldGroupProps<
@@ -259,8 +262,8 @@ export interface WithFieldGroupProps<
 > extends BaseFormOptions<TFieldGroupData, TSubmitMeta> {
   // Optional, but adds props to the `render` function outside of `form`
   props?: TRenderProps
-  render: (
-    props: PropsWithChildren<
+  render: FunctionComponent<
+    PropsWithChildren<
       NoInfer<TRenderProps> & {
         group: AppFieldExtendedReactFieldGroupApi<
           unknown,
@@ -283,8 +286,8 @@ export interface WithFieldGroupProps<
           TFormComponents
         >
       }
-    >,
-  ) => ReactNode
+    >
+  >
 }
 
 export function createFormHook<
@@ -342,13 +345,13 @@ export function createFormHook<
   > {
     const form = useForm(props)
 
-    const AppForm = useMemo(() => {
-      const AppForm = (({ children }) => {
+    // PropsWithChildren<P> is not optional in React 17
+    const AppForm = useMemo<ComponentType<PropsWithChildren<{}>>>(() => {
+      return ({ children }) => {
         return (
           <formContext.Provider value={form}>{children}</formContext.Provider>
         )
-      }) as ComponentType<PropsWithChildren>
-      return AppForm
+      }
     }, [form])
 
     const AppField = useMemo(() => {
@@ -521,7 +524,7 @@ export function createFormHook<
         fields: TFields
       }
     >,
-  ) => ReactNode {
+  ) => ReturnType<FunctionComponent> {
     return function Render(innerProps) {
       const fieldGroupProps = useMemo(() => {
         return {

packages/react-form/src/useField.tsx

@@ -13,7 +13,7 @@ import type {
   FormAsyncValidateOrFn,
   FormValidateOrFn,
 } from '@tanstack/form-core'
-import type { FunctionComponent, ReactNode } from 'react'
+import type { FunctionComponent, ReactElement, ReactNode } from 'react'
 import type { UseFieldOptions, UseFieldOptionsBound } from './types'
 
 interface ReactFieldApi<
@@ -496,7 +496,7 @@ export type FieldComponent<
   TFormOnServer,
   TPatentSubmitMeta,
   ExtendedApi
->) => ReactNode
+>) => ReturnType<FunctionComponent>
 
 /**
  * A type alias representing a field component for a form lens data type.
@@ -584,7 +584,7 @@ export type LensFieldComponent<
      */
     onBlurListenTo?: DeepKeys<TLensData>[]
   }
-}) => ReactNode
+}) => ReturnType<FunctionComponent>
 
 /**
  * A function component that takes field options and a render function as children and returns a React component.
@@ -650,7 +650,7 @@ export const Field = (<
   TFormOnDynamicAsync,
   TFormOnServer,
   TPatentSubmitMeta
->): ReactNode => {
+>): ReturnType<FunctionComponent> => {
   const fieldApi = useField(fieldOptions as any)
 
   const jsxToDisplay = useMemo(

packages/react-form/src/useFieldGroup.tsx

@@ -13,7 +13,12 @@ import type {
   FormValidateOrFn,
 } from '@tanstack/form-core'
 import type { AppFieldExtendedReactFormApi } from './createFormHook'
-import type { ComponentType, PropsWithChildren, ReactNode } from 'react'
+import type {
+  ComponentType,
+  FunctionComponent,
+  PropsWithChildren,
+  ReactNode,
+} from 'react'
 import type { LensFieldComponent } from './useField'
 
 function LocalSubscribe({
@@ -23,10 +28,10 @@ function LocalSubscribe({
 }: PropsWithChildren<{
   lens: AnyFieldGroupApi
   selector: (state: FieldGroupState<any>) => FieldGroupState<any>
-}>) {
+}>): ReturnType<FunctionComponent> {
   const data = useStore(lens.store, selector)
 
-  return functionalUpdate(children, data)
+  return <>{functionalUpdate(children, data)}</>
 }
 
 /**
@@ -73,7 +78,7 @@ export type AppFieldExtendedReactFieldGroupApi<
       TSubmitMeta,
       NoInfer<TFieldComponents>
     >
-    AppForm: ComponentType<PropsWithChildren>
+    AppForm: ComponentType<PropsWithChildren<{}>>
     /**
      * A React component to render form fields. With this, you can render and manage individual form fields.
      */
@@ -85,7 +90,7 @@ export type AppFieldExtendedReactFieldGroupApi<
     Subscribe: <TSelected = NoInfer<FieldGroupState<TFieldGroupData>>>(props: {
       selector?: (state: NoInfer<FieldGroupState<TFieldGroupData>>) => TSelected
       children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
-    }) => ReactNode
+    }) => ReturnType<FunctionComponent>
   }
 
 export function useFieldGroup<

packages/react-form/src/useForm.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { FormApi, functionalUpdate } from '@tanstack/form-core'
+import { FormApi, functionalUpdate, uuid } from '@tanstack/form-core'
 import { useStore } from '@tanstack/react-store'
-import { useId, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type {
@@ -13,7 +13,12 @@ import type {
   FormState,
   FormValidateOrFn,
 } from '@tanstack/form-core'
-import type { PropsWithChildren, ReactNode } from 'react'
+import type {
+  FunctionComponent,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+} from 'react'
 import type { FieldComponent } from './useField'
 import type { NoInfer } from '@tanstack/react-store'
 
@@ -89,7 +94,7 @@ export interface ReactFormApi<
       >,
     ) => TSelected
     children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
-  }) => ReactNode
+  }) => ReturnType<FunctionComponent>
 }
 
 /**
@@ -144,10 +149,10 @@ function LocalSubscribe({
 }: PropsWithChildren<{
   form: AnyFormApi
   selector: (state: AnyFormState) => AnyFormState
-}>) {
+}>): ReturnType<FunctionComponent> {
   const data = useStore(form.store, selector)
 
-  return functionalUpdate(children, data)
+  return <>{functionalUpdate(children, data)}</>
 }
 
 /**
@@ -184,7 +189,11 @@ export function useForm<
     TSubmitMeta
   >,
 ) {
-  const formId = useId()
+  const formId = useRef<string>(opts?.formId as never)
+
+  if (!formId.current) {
+    formId.current = uuid()
+  }
 
   const [formApi] = useState(() => {
     const api = new FormApi<
@@ -200,7 +209,7 @@ export function useForm<
       TOnDynamicAsync,
       TOnServer,
       TSubmitMeta
-    >({ ...opts, formId: formId })
+    >({ ...opts, formId: formId.current })
 
     const extendedApi: ReactFormExtendedApi<
       TFormData,