@tanstack/react-form 1.26.0 → 1.27.0

package/dist/esm/useForm.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { FormApi, functionalUpdate } from "@tanstack/form-core";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { uuid, FormApi, functionalUpdate } from "@tanstack/form-core";
 import { useStore } from "@tanstack/react-store";
-import { useId, useState } from "react";
+import { useState, useMemo } from "react";
 import { Field } from "./useField.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 function LocalSubscribe({
@@ -11,33 +11,50 @@ function LocalSubscribe({
   children
 }) {
   const data = useStore(form.store, selector);
-  return functionalUpdate(children, data);
+  return /* @__PURE__ */ jsx(Fragment, { children: functionalUpdate(children, data) });
 }
 function useForm(opts) {
-  const formId = useId();
-  const [formApi] = useState(() => {
-    const api = new FormApi({ ...opts, formId });
-    const extendedApi = api;
+  const fallbackFormId = useState(() => uuid())[0];
+  const [prevFormId, setPrevFormId] = useState(opts?.formId);
+  const [formApi, setFormApi] = useState(() => {
+    return new FormApi({ ...opts, formId: opts?.formId ?? fallbackFormId });
+  });
+  if (prevFormId !== opts?.formId) {
+    const formId = opts?.formId ?? fallbackFormId;
+    setFormApi(new FormApi({ ...opts, formId }));
+    setPrevFormId(formId);
+  }
+  const extendedFormApi = useMemo(() => {
+    const extendedApi = {
+      ...formApi,
+      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those
+      get formId() {
+        return formApi._formId;
+      },
+      get state() {
+        return formApi.store.state;
+      }
+    };
     extendedApi.Field = function APIField(props) {
-      return /* @__PURE__ */ jsx(Field, { ...props, form: api });
+      return /* @__PURE__ */ jsx(Field, { ...props, form: formApi });
     };
     extendedApi.Subscribe = function Subscribe(props) {
       return /* @__PURE__ */ jsx(
         LocalSubscribe,
         {
-          form: api,
+          form: formApi,
           selector: props.selector,
           children: props.children
         }
       );
     };
     return extendedApi;
-  });
+  }, [formApi]);
   useIsomorphicLayoutEffect(formApi.mount, []);
   useIsomorphicLayoutEffect(() => {
     formApi.update(opts);
   });
-  return formApi;
+  return extendedFormApi;
 }
 export {
   useForm

package/dist/esm/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["'use client'\n\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport { useId, useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFormApi,\n  AnyFormState,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n  in out TFormData,\n  in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TSubmitMeta,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <\n    TSelected = NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer\n      >\n    >,\n  >(props: {\n    selector?: (\n      state: NoInfer<\n        FormState<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer\n        >\n      >,\n    ) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n> = FormApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  ReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: AnyFormApi\n  selector: (state: AnyFormState) => AnyFormState\n}>) {\n  const data = useStore(form.store, selector)\n\n  return functionalUpdate(children, data)\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const formId = useId()\n\n  const [formApi] = useState(() => {\n    const api = new FormApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >({ ...opts, formId: formId })\n\n    const extendedApi: ReactFormExtendedApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    > = api as never\n\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={api} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          form={api}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  })\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    formApi.update(opts)\n  })\n\n  return formApi\n}\n"],"names":[],"mappings":";;;;;;;AA2IA;AAAwB;AACtB;AACA;AAEF;AAIE;AAEA;AACF;AAOO;AA6BL;AAEA;AACE;AAeA;AAeA;AACE;AAAoC;AAGtC;AACE;AACE;AAAC;AAAA;AACO;AACU;AACA;AAAA;AAAA;AAKtB;AAAO;AAGT;AAMA;AACE;AAAmB;AAGrB;AACF;;;;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["'use client'\n\nimport { FormApi, functionalUpdate, uuid } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport { useMemo, useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n  AnyFormApi,\n  AnyFormState,\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { FunctionComponent, PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n  in out TFormData,\n  in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  in out TSubmitMeta,\n> {\n  /**\n   * A React component to render form fields. With this, you can render and manage individual form fields.\n   */\n  Field: FieldComponent<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n  /**\n   * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n   */\n  Subscribe: <\n    TSelected = NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnDynamic,\n        TOnDynamicAsync,\n        TOnServer\n      >\n    >,\n  >(props: {\n    selector?: (\n      state: NoInfer<\n        FormState<\n          TFormData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TOnDynamic,\n          TOnDynamicAsync,\n          TOnServer\n        >\n      >,\n    ) => TSelected\n    children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n  }) => ReturnType<FunctionComponent>\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n> = FormApi<\n  TFormData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TOnDynamic,\n  TOnDynamicAsync,\n  TOnServer,\n  TSubmitMeta\n> &\n  ReactFormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >\n\nfunction LocalSubscribe({\n  form,\n  selector,\n  children,\n}: PropsWithChildren<{\n  form: AnyFormApi\n  selector: (state: AnyFormState) => AnyFormState\n}>): ReturnType<FunctionComponent> {\n  const data = useStore(form.store, selector)\n\n  return <>{functionalUpdate(children, data)}</>\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n  TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnDynamic,\n    TOnDynamicAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const fallbackFormId = useState(() => uuid())[0]\n  const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)\n\n  const [formApi, setFormApi] = useState(() => {\n    return new FormApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    >({ ...opts, formId: opts?.formId ?? fallbackFormId })\n  })\n\n  if (prevFormId !== opts?.formId) {\n    const formId = opts?.formId ?? fallbackFormId\n    setFormApi(new FormApi({ ...opts, formId }))\n    setPrevFormId(formId)\n  }\n\n  const extendedFormApi = useMemo(() => {\n    const extendedApi: ReactFormExtendedApi<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnDynamic,\n      TOnDynamicAsync,\n      TOnServer,\n      TSubmitMeta\n    > = {\n      ...formApi,\n      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those\n      get formId(): string {\n        return formApi._formId\n      },\n      get state() {\n        return formApi.store.state\n      },\n    } as never\n\n    extendedApi.Field = function APIField(props) {\n      return <Field {...props} form={formApi} />\n    }\n\n    extendedApi.Subscribe = function Subscribe(props: any) {\n      return (\n        <LocalSubscribe\n          form={formApi}\n          selector={props.selector}\n          children={props.children}\n        />\n      )\n    }\n\n    return extendedApi\n  }, [formApi])\n\n  useIsomorphicLayoutEffect(formApi.mount, [])\n\n  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  useIsomorphicLayoutEffect(() => {\n    formApi.update(opts)\n  })\n\n  return extendedFormApi\n}\n"],"names":[],"mappings":";;;;;;;AA2IA;AAAwB;AACtB;AACA;AAEF;AAIE;AAEA;AACF;AAOO;AA6BL;AACA;AAEA;AACE;AAaqD;AAGvD;AACE;AACA;AACA;AAAoB;AAGtB;AACE;AAaI;AACC;AAAA;AAGD;AAAe;AACjB;AAEE;AAAqB;AACvB;AAGF;AACE;AAAwC;AAG1C;AACE;AACE;AAAC;AAAA;AACO;AACU;AACA;AAAA;AAAA;AAKtB;AAAO;AAGT;AAMA;AACE;AAAmB;AAGrB;AACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/react-store": "^0.7.7",
-    "@tanstack/form-core": "1.26.0"
+    "@tanstack/react-store": "^0.8.0",
+    "@tanstack/form-core": "1.27.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

package/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 {

package/src/useField.tsx

@@ -1,10 +1,12 @@
 'use client'
 
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useStore } from '@tanstack/react-store'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type {
+  AnyFieldApi,
+  AnyFieldMeta,
   DeepKeys,
   DeepValue,
   FieldAsyncValidateOrFn,
@@ -13,7 +15,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<
@@ -195,17 +197,103 @@ export function useField<
 ) {
   // Keep a snapshot of options so that React Compiler doesn't
   // wrongly optimize fieldApi.
-  const optsRef = useRef(opts)
-  optsRef.current = opts
+  const [prevOptions, setPrevOptions] = useState(() => ({
+    form: opts.form,
+    name: opts.name,
+  }))
 
-  const fieldApi = useMemo(() => {
-    const api = new FieldApi({
-      ...optsRef.current,
-      form: opts.form,
-      name: opts.name,
+  const [fieldApi, setFieldApi] = useState(() => {
+    return new FieldApi({
+      ...opts,
     })
+  })
+
+  // 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`
+  if (prevOptions.form !== opts.form || prevOptions.name !== opts.name) {
+    setFieldApi(
+      new FieldApi({
+        ...opts,
+      }),
+    )
+    setPrevOptions({ form: opts.form, name: 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 extendedFieldApi = useMemo(() => {
+    const reactiveFieldApi = {
+      ...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']
+      },
+    }
 
-    const extendedApi: typeof api &
+    const extendedApi: 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,
@@ -219,16 +307,21 @@ 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])
+  }, [
+    fieldApi,
+    reactiveStateValue,
+    reactiveMetaIsTouched,
+    reactiveMetaIsBlurred,
+    reactiveMetaIsDirty,
+    reactiveMetaErrorMap,
+    reactiveMetaErrorSourceMap,
+    reactiveMetaIsValidating,
+  ])
 
   useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
 
@@ -252,7 +345,7 @@ export function useField<
       : undefined,
   )
 
-  return fieldApi
+  return extendedFieldApi
 }
 
 /**
@@ -496,7 +589,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 +677,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,18 +743,12 @@ export const Field = (<
   TFormOnDynamicAsync,
   TFormOnServer,
   TPatentSubmitMeta
->): ReactNode => {
+>): ReturnType<FunctionComponent> => {
   const fieldApi = useField(fieldOptions as any)
 
   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<

package/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<

package/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 { useMemo, useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type {
@@ -13,7 +13,7 @@ import type {
   FormState,
   FormValidateOrFn,
 } from '@tanstack/form-core'
-import type { PropsWithChildren, ReactNode } from 'react'
+import type { FunctionComponent, PropsWithChildren, ReactNode } from 'react'
 import type { FieldComponent } from './useField'
 import type { NoInfer } from '@tanstack/react-store'
 
@@ -89,7 +89,7 @@ export interface ReactFormApi<
       >,
     ) => TSelected
     children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
-  }) => ReactNode
+  }) => ReturnType<FunctionComponent>
 }
 
 /**
@@ -144,10 +144,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,10 +184,11 @@ export function useForm<
     TSubmitMeta
   >,
 ) {
-  const formId = useId()
+  const fallbackFormId = useState(() => uuid())[0]
+  const [prevFormId, setPrevFormId] = useState<string>(opts?.formId as never)
 
-  const [formApi] = useState(() => {
-    const api = new FormApi<
+  const [formApi, setFormApi] = useState(() => {
+    return new FormApi<
       TFormData,
       TOnMount,
       TOnChange,
@@ -200,8 +201,16 @@ export function useForm<
       TOnDynamicAsync,
       TOnServer,
       TSubmitMeta
-    >({ ...opts, formId: formId })
+    >({ ...opts, formId: opts?.formId ?? fallbackFormId })
+  })
+
+  if (prevFormId !== opts?.formId) {
+    const formId = opts?.formId ?? fallbackFormId
+    setFormApi(new FormApi({ ...opts, formId }))
+    setPrevFormId(formId)
+  }
 
+  const extendedFormApi = useMemo(() => {
     const extendedApi: ReactFormExtendedApi<
       TFormData,
       TOnMount,
@@ -215,16 +224,25 @@ export function useForm<
       TOnDynamicAsync,
       TOnServer,
       TSubmitMeta
-    > = api as never
+    > = {
+      ...formApi,
+      // We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those
+      get formId(): string {
+        return formApi._formId
+      },
+      get state() {
+        return formApi.store.state
+      },
+    } as never
 
     extendedApi.Field = function APIField(props) {
-      return <Field {...props} form={api} />
+      return <Field {...props} form={formApi} />
     }
 
     extendedApi.Subscribe = function Subscribe(props: any) {
       return (
         <LocalSubscribe
-          form={api}
+          form={formApi}
           selector={props.selector}
           children={props.children}
         />
@@ -232,7 +250,7 @@ export function useForm<
     }
 
     return extendedApi
-  })
+  }, [formApi])
 
   useIsomorphicLayoutEffect(formApi.mount, [])
 
@@ -244,5 +262,5 @@ export function useForm<
     formApi.update(opts)
   })
 
-  return formApi
+  return extendedFormApi
 }