fix(react-form): fix cache components support

packages/react-form/src/useForm.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { FormApi, functionalUpdate, uuid } from '@tanstack/form-core'
+import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import { useStore } from '@tanstack/react-store'
 import { useMemo, useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+import { useId } from './useId'
 import type {
   AnyFormApi,
   AnyFormState,
@@ -184,7 +185,7 @@ export function useForm<
     TSubmitMeta
   >,
 ) {
-  const fallbackFormId = useState(() => opts?.formId ?? uuid())[0]
+  const fallbackFormId = useId()
   const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)
 
   const [formApi, setFormApi] = useState(() => {

packages/react-form/src/useId.ts

@@ -0,0 +1,13 @@
+import { version as reactVersion, useId as useReactId } from 'react'
+import { uuid } from '@tanstack/form-core'
+
+/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */
+export function useId() {
+  if (reactVersion.split('.')[0] === '17') {
+    return uuid()
+  }
+
+  // react-compiler/react-compiler is disabled because useId is not available in React 17. However in React 18+ it is available and we want to use it.
+  // eslint-disable-next-line react-compiler/react-compiler, react-hooks/rules-of-hooks
+  return useReactId()
+}