fix(react-form): fix server hydration issues (#1913)

* fix(react-form): fix cache components support

Attempts to resolve #1907

Removes `Math.random()` introduced in #1893 from the hot path allowing the page to be pre-built with a a user provided form id.

source: https://nextjs.org/docs/app/getting-started/cache-components#non-deterministic-operations

* generate changeset

* Change to patch

* feat: use useId on React 18+ with a fallback to uuid on React 17

* chore: incredible review feedback

* update changelog

* chore: rename file

* import correctly

* return a stable UUID reference

* chore: switch from useMemo to useState

* ci: apply automated fixes and generate docs

---------

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

Author: mhornbacher

.changeset/metal-times-remain.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/react-form': patch
+'@tanstack/react-form-nextjs': patch
+---
+
+use React 18's useId hook by default for formId generation, only calling Math.random() as a fallback if no formId is provided.

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 { useFormId } from './useFormId'
 import type {
   AnyFormApi,
   AnyFormState,
@@ -184,7 +185,7 @@ export function useForm<
     TSubmitMeta
   >,
 ) {
-  const fallbackFormId = useState(() => uuid())[0]
+  const fallbackFormId = useFormId()
   const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)
 
   const [formApi, setFormApi] = useState(() => {

packages/react-form/src/useFormId.ts

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { useUUID } from './useUUID'
+
+/** React 17 does not have the useId hook, so we use a random uuid as a fallback. */
+export const useFormId =
+  React.version.split('.')[0] === '17' ? useUUID : React.useId

packages/react-form/src/useUUID.ts

@@ -0,0 +1,7 @@
+import { useState } from 'react'
+import { uuid } from '@tanstack/form-core'
+
+/** Generates a random UUID. and returns a stable reference to it. */
+export function useUUID() {
+  return useState<string>(() => uuid())[0]
+}