Fix react compiler

packages/react-form/src/useField.tsx

@@ -5,6 +5,8 @@ import { useStore } from '@tanstack/react-store'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type {
+  AnyFieldApi,
+  AnyFieldMeta,
   DeepKeys,
   DeepValue,
   FieldAsyncValidateOrFn,
@@ -205,7 +207,74 @@ export function useField<
       name: opts.name,
     })
 
-    const extendedApi: typeof api &
+    return api
+    // We only want to
+    // update on name changes since those are at risk of becoming stale. The field
+    // state must be up to date for the internal JSX render.
+    // The other options can freely be in `fieldApi.update`
+  }, [opts.form, opts.name])
+
+  const reactiveStateValue = useStore(fieldApi.store, (state) => state.value)
+  const reactiveMetaIsTouched = useStore(
+    fieldApi.store,
+    (state) => state.meta.isTouched,
+  )
+  const reactiveMetaIsBlurred = useStore(
+    fieldApi.store,
+    (state) => state.meta.isBlurred,
+  )
+  const reactiveMetaIsDirty = useStore(
+    fieldApi.store,
+    (state) => state.meta.isDirty,
+  )
+  const reactiveMetaErrorMap = useStore(
+    fieldApi.store,
+    (state) => state.meta.errorMap,
+  )
+  const reactiveMetaErrorSourceMap = useStore(
+    fieldApi.store,
+    (state) => state.meta.errorSourceMap,
+  )
+  const reactiveMetaIsValidating = useStore(
+    fieldApi.store,
+    (state) => state.meta.isValidating,
+  )
+
+  // This makes me sad, but if I understand correctly, this is what we have to do for reactivity to work properly with React compiler.
+  const reactiveFieldApi = useMemo(
+    () => ({
+      ...fieldApi,
+      get state() {
+        return {
+          value: reactiveStateValue,
+          get meta() {
+            return {
+              ...fieldApi.state.meta,
+              isTouched: reactiveMetaIsTouched,
+              isBlurred: reactiveMetaIsBlurred,
+              isDirty: reactiveMetaIsDirty,
+              errorMap: reactiveMetaErrorMap,
+              errorSourceMap: reactiveMetaErrorSourceMap,
+              isValidating: reactiveMetaIsValidating,
+            } satisfies AnyFieldMeta
+          },
+        } satisfies AnyFieldApi['state']
+      },
+    }),
+    [
+      fieldApi,
+      reactiveStateValue,
+      reactiveMetaIsTouched,
+      reactiveMetaIsBlurred,
+      reactiveMetaIsDirty,
+      reactiveMetaErrorMap,
+      reactiveMetaErrorSourceMap,
+      reactiveMetaIsValidating,
+    ],
+  )
+
+  const extendedFieldApi = useMemo(() => {
+    const extendedApi: typeof reactiveFieldApi &
       ReactFieldApi<
         TParentData,
         TFormOnMount,
@@ -219,16 +288,12 @@ export function useField<
         TFormOnDynamicAsync,
         TFormOnServer,
         TPatentSubmitMeta
-      > = api as never
+      > = reactiveFieldApi as never
 
     extendedApi.Field = Field as never
 
     return extendedApi
-    // We only want to
-    // update on name changes since those are at risk of becoming stale. The field
-    // state must be up to date for the internal JSX render.
-    // The other options can freely be in `fieldApi.update`
-  }, [opts.form, opts.name])
+  }, [reactiveFieldApi])
 
   useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
 
@@ -252,7 +317,45 @@ export function useField<
       : undefined,
   )
 
-  return fieldApi
+  return extendedFieldApi as FieldApi<
+    TParentData,
+    TName,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TOnDynamic,
+    TOnDynamicAsync,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnDynamic,
+    TFormOnDynamicAsync,
+    TFormOnServer,
+    TPatentSubmitMeta
+  > &
+    ReactFieldApi<
+      TParentData,
+      TFormOnMount,
+      TFormOnChange,
+      TFormOnChangeAsync,
+      TFormOnBlur,
+      TFormOnBlurAsync,
+      TFormOnSubmit,
+      TFormOnSubmitAsync,
+      TFormOnDynamic,
+      TFormOnDynamicAsync,
+      TFormOnServer,
+      TPatentSubmitMeta
+    >
 }
 
 /**
@@ -655,13 +758,7 @@ export const Field = (<
 
   const jsxToDisplay = useMemo(
     () => functionalUpdate(children, fieldApi as any),
-    /**
-     * The reason this exists is to fix an issue with the React Compiler.
-     * Namely, functionalUpdate is memoized where it checks for `fieldApi`, which is a static type.
-     * This means that when `state.value` changes, it does not trigger a re-render. The useMemo explicitly fixes this problem
-     */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [children, fieldApi, fieldApi.state.value, fieldApi.state.meta],
+    [children, fieldApi],
   )
   return (<>{jsxToDisplay}</>) as never
 }) satisfies FunctionComponent<