@tanstack/react-form 0.13.6 → 0.13.7

package/dist/cjs/useField.cjs

@@ -6,7 +6,6 @@ const reactStore = require("@tanstack/react-store");
 const formCore = require("@tanstack/form-core");
 const formContext = require("./formContext.cjs");
 const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
-const useIsomorphicEffectOnce = require("./useIsomorphicEffectOnce.cjs");
 function useField(opts) {
   const { formApi, parentFieldName } = formContext.useFormContext();
   const [fieldApi] = rehackt.useState(() => {
@@ -20,6 +19,7 @@ function useField(opts) {
     api.Field = Field;
     return api;
   });
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi]);
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     fieldApi.update({ ...opts, form: formApi });
   });
@@ -29,16 +29,6 @@ function useField(opts) {
       return [state.meta, Object.keys(state.value).length];
     } : void 0
   );
-  const unmountFn = rehackt.useRef(null);
-  useIsomorphicEffectOnce.useIsomorphicEffectOnce(() => {
-    return () => {
-      var _a;
-      (_a = unmountFn.current) == null ? void 0 : _a.call(unmountFn);
-    };
-  });
-  if (!unmountFn.current) {
-    unmountFn.current = fieldApi.mount();
-  }
   return fieldApi;
 }
 function Field({

package/dist/cjs/useField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useRef, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { formContext, useFormContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useIsomorphicEffectOnce } from './useIsomorphicEffectOnce'\nimport type { UseFieldOptions } from './types'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({\n      ...opts,\n      form: formApi as never,\n      // TODO: Fix typings to include `index` and `parentFieldName`, if present\n      name: name as typeof opts.name as never,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\n\n  /**\n   * fieldApi.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    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value).length]\n        }\n      : undefined,\n  )\n  const unmountFn = useRef<(() => void) | null>(null)\n\n  useIsomorphicEffectOnce(() => {\n    return () => {\n      unmountFn.current?.()\n    }\n  })\n\n  // We have to mount it right as soon as it renders, otherwise we get:\n  // https://github.com/TanStack/form/issues/523\n  if (!unmountFn.current) {\n    unmountFn.current = fieldApi.mount()\n  }\n\n  return fieldApi as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => any\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => any\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,\n  ) => any\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi.form as never,\n        parentFieldName: fieldApi.name,\n      }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useFormContext","useState","FieldApi","useIsomorphicLayoutEffect","useStore","useRef","useIsomorphicEffectOnce","jsx","formContext","functionalUpdate"],"mappings":";;;;;;;;;AAsDO,SAAS,SAUd,MAC+D;AAE/D,QAAM,EAAE,SAAS,gBAAgB,IAAIA,YAAe,eAAA;AAEpD,QAAM,CAAC,QAAQ,IAAIC,QAAAA,SAAS,MAAM;AAC1B,UAAA,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEL,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,MAEN;AAAA,IAAA,CACD;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAMDC,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,EAAA,CACpD;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM;AAAA,IAErD,IAAA;AAAA,EAAA;AAEA,QAAA,YAAYC,eAA4B,IAAI;AAElDC,0BAAAA,wBAAwB,MAAM;AAC5B,WAAO,MAAM;;AACX,sBAAU,YAAV;AAAA,IAAoB;AAAA,EACtB,CACD;AAIG,MAAA,CAAC,UAAU,SAAS;AACZ,cAAA,UAAU,SAAS;EAC/B;AAEO,SAAA;AACT;AA0DO,SAAS,MASd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAI0E;AAClE,QAAA,WAAW,SAAS,YAAmB;AAG3C,SAAAC,2BAAA;AAAA,IAACC,YAAAA,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,SAAS,SAAS;AAAA,QAClB,iBAAiB,SAAS;AAAA,MAC5B;AAAA,MACA,UAAUC,SAAAA,iBAAiB,UAAU,QAAe;AAAA,IAAA;AAAA,EAAA;AAG1D;;;"}
+{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { formContext, useFormContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({\n      ...opts,\n      form: formApi as never,\n      // TODO: Fix typings to include `index` and `parentFieldName`, if present\n      name: name as typeof opts.name as never,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.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    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => any\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => any\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,\n  ) => any\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi.form as never,\n        parentFieldName: fieldApi.name,\n      }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useFormContext","useState","FieldApi","useIsomorphicLayoutEffect","useStore","jsx","formContext","functionalUpdate"],"mappings":";;;;;;;;AAqDO,SAAS,SAUd,MAC+D;AAE/D,QAAM,EAAE,SAAS,gBAAgB,IAAIA,YAAe,eAAA;AAEpD,QAAM,CAAC,QAAQ,IAAIC,QAAAA,SAAS,MAAM;AAC1B,UAAA,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEL,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,MAEN;AAAA,IAAA,CACD;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,EAAA,CACpD;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM;AAAA,IAErD,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AA0DO,SAAS,MASd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAI0E;AAClE,QAAA,WAAW,SAAS,YAAmB;AAG3C,SAAAC,2BAAA;AAAA,IAACC,YAAAA,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,SAAS,SAAS;AAAA,QAClB,iBAAiB,SAAS;AAAA,MAC5B;AAAA,MACA,UAAUC,SAAAA,iBAAiB,UAAU,QAAe;AAAA,IAAA;AAAA,EAAA;AAG1D;;;"}

package/dist/cjs/useForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useState,\n} from 'rehackt'\nimport { Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: PropsWithChildren) => JSX.Element\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => JSX.Element\n  }\n}\n\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const [formApi] = useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = function Provider(props) {\n      useIsomorphicLayoutEffect(api.mount, [])\n      return (\n        <formContext.Provider {...props} value={{ formApi: api as never }} />\n      )\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\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 as any\n}\n"],"names":["useState","FormApi","useIsomorphicLayoutEffect","jsx","formContext","Field","useField","useStore","functionalUpdate"],"mappings":";;;;;;;;;AA8BO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAIA,QAAAA,SAAS,MAAM;AAEzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AAEnD,QAAA,WAAW,SAAS,SAAS,OAAO;AACZC,gCAAAA,0BAAA,IAAI,OAAO,CAAA,CAAE;AAErC,aAAAC,+BAACC,YAAAA,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAgB,EAAA,CAAA;AAAA,IAAA;AAGvE,QAAI,QAAQC;AACZ,QAAI,WAAWC;AACX,QAAA,WAAW,CAEb,aACG;AAEI,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CL,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
+{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useState,\n} from 'rehackt'\nimport { Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: PropsWithChildren) => JSX.Element\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      /**\n      TypeScript versions <=5.0.4 have a bug that prevents\n      the type of the `TSelected` generic from being inferred\n      from the return type of this method.\n\n      In these versions, `TSelected` will fall back to the default\n      type (or `unknown` if that's not defined).\n\n      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n      */\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => JSX.Element\n  }\n}\n\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const [formApi] = useState(() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = function Provider(props) {\n      useIsomorphicLayoutEffect(api.mount, [])\n      return (\n        <formContext.Provider {...props} value={{ formApi: api as never }} />\n      )\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\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 as any\n}\n"],"names":["useState","FormApi","useIsomorphicLayoutEffect","jsx","formContext","Field","useField","useStore","functionalUpdate"],"mappings":";;;;;;;;;AAyCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAIA,QAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AAEnD,QAAA,WAAW,SAAS,SAAS,OAAO;AACZC,gCAAAA,0BAAA,IAAI,OAAO,CAAA,CAAE;AAErC,aAAAC,+BAACC,YAAAA,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAgB,EAAA,CAAA;AAAA,IAAA;AAGvE,QAAI,QAAQC;AACZ,QAAI,WAAWC;AACX,QAAA,WAAW,CAEb,aACG;AAEI,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CL,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}

package/dist/cjs/useForm.d.cts

@@ -11,6 +11,17 @@ declare module '@tanstack/form-core' {
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            /**
+            TypeScript versions <=5.0.4 have a bug that prevents
+            the type of the `TSelected` generic from being inferred
+            from the return type of this method.
+      
+            In these versions, `TSelected` will fall back to the default
+            type (or `unknown` if that's not defined).
+      
+            @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
+            @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
+            */
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
             children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
         }) => JSX.Element;

package/dist/esm/useField.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef } from "rehackt";
+import { useState } from "rehackt";
 import { useStore } from "@tanstack/react-store";
 import { FieldApi, functionalUpdate } from "@tanstack/form-core";
 import { useFormContext, formContext } from "./formContext.js";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
-import { useIsomorphicEffectOnce } from "./useIsomorphicEffectOnce.js";
 function useField(opts) {
   const { formApi, parentFieldName } = useFormContext();
   const [fieldApi] = useState(() => {
@@ -18,6 +17,7 @@ function useField(opts) {
     api.Field = Field;
     return api;
   });
+  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi]);
   useIsomorphicLayoutEffect(() => {
     fieldApi.update({ ...opts, form: formApi });
   });
@@ -27,16 +27,6 @@ function useField(opts) {
       return [state.meta, Object.keys(state.value).length];
     } : void 0
   );
-  const unmountFn = useRef(null);
-  useIsomorphicEffectOnce(() => {
-    return () => {
-      var _a;
-      (_a = unmountFn.current) == null ? void 0 : _a.call(unmountFn);
-    };
-  });
-  if (!unmountFn.current) {
-    unmountFn.current = fieldApi.mount();
-  }
   return fieldApi;
 }
 function Field({

package/dist/esm/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useRef, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { formContext, useFormContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport { useIsomorphicEffectOnce } from './useIsomorphicEffectOnce'\nimport type { UseFieldOptions } from './types'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({\n      ...opts,\n      form: formApi as never,\n      // TODO: Fix typings to include `index` and `parentFieldName`, if present\n      name: name as typeof opts.name as never,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\n\n  /**\n   * fieldApi.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    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value).length]\n        }\n      : undefined,\n  )\n  const unmountFn = useRef<(() => void) | null>(null)\n\n  useIsomorphicEffectOnce(() => {\n    return () => {\n      unmountFn.current?.()\n    }\n  })\n\n  // We have to mount it right as soon as it renders, otherwise we get:\n  // https://github.com/TanStack/form/issues/523\n  if (!unmountFn.current) {\n    unmountFn.current = fieldApi.mount()\n  }\n\n  return fieldApi as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => any\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => any\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,\n  ) => any\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi.form as never,\n        parentFieldName: fieldApi.name,\n      }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAsDO,SAAS,SAUd,MAC+D;AAE/D,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEL,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,MAEN;AAAA,IAAA,CACD;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAMD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,EAAA,CACpD;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM;AAAA,IAErD,IAAA;AAAA,EAAA;AAEA,QAAA,YAAY,OAA4B,IAAI;AAElD,0BAAwB,MAAM;AAC5B,WAAO,MAAM;;AACX,sBAAU,YAAV;AAAA,IAAoB;AAAA,EACtB,CACD;AAIG,MAAA,CAAC,UAAU,SAAS;AACZ,cAAA,UAAU,SAAS;EAC/B;AAEO,SAAA;AACT;AA0DO,SAAS,MASd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAI0E;AAClE,QAAA,WAAW,SAAS,YAAmB;AAG3C,SAAA;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,SAAS,SAAS;AAAA,QAClB,iBAAiB,SAAS;AAAA,MAC5B;AAAA,MACA,UAAU,iBAAiB,UAAU,QAAe;AAAA,IAAA;AAAA,EAAA;AAG1D;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { formContext, useFormContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type UseField<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\nexport function useField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = useState(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({\n      ...opts,\n      form: formApi as never,\n      // TODO: Fix typings to include `index` and `parentFieldName`, if present\n      name: name as typeof opts.name as never,\n    })\n\n    api.Field = Field as never\n\n    return api\n  })\n\n  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n  /**\n   * fieldApi.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    fieldApi.update({ ...opts, form: formApi } as never)\n  })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state) => {\n          return [state.meta, Object.keys(state.value).length]\n        }\n      : undefined,\n  )\n\n  return fieldApi as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => any\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => any\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator>,\n  ) => any\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) {\n  const fieldApi = useField(fieldOptions as any)\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi.form as never,\n        parentFieldName: fieldApi.name,\n      }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;;AAqDO,SAAS,SAUd,MAC+D;AAE/D,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEL,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,MAEN;AAAA,IAAA,CACD;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,EAAA,CACpD;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM;AAAA,IAErD,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AA0DO,SAAS,MASd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAI0E;AAClE,QAAA,WAAW,SAAS,YAAmB;AAG3C,SAAA;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,SAAS,SAAS;AAAA,QAClB,iBAAiB,SAAS;AAAA,MAC5B;AAAA,MACA,UAAU,iBAAiB,UAAU,QAAe;AAAA,IAAA;AAAA,EAAA;AAG1D;"}

package/dist/esm/useForm.d.ts

@@ -11,6 +11,17 @@ declare module '@tanstack/form-core' {
         useField: UseField<TFormData>;
         useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            /**
+            TypeScript versions <=5.0.4 have a bug that prevents
+            the type of the `TSelected` generic from being inferred
+            from the return type of this method.
+      
+            In these versions, `TSelected` will fall back to the default
+            type (or `unknown` if that's not defined).
+      
+            @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
+            @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
+            */
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
             children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
         }) => JSX.Element;

package/dist/esm/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useState,\n} from 'rehackt'\nimport { Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: PropsWithChildren) => JSX.Element\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => JSX.Element\n  }\n}\n\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const [formApi] = useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = function Provider(props) {\n      useIsomorphicLayoutEffect(api.mount, [])\n      return (\n        <formContext.Provider {...props} value={{ formApi: api as never }} />\n      )\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\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 as any\n}\n"],"names":[],"mappings":";;;;;;;AA8BO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AAEzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEnD,QAAA,WAAW,SAAS,SAAS,OAAO;AACZ,gCAAA,IAAI,OAAO,CAAA,CAAE;AAErC,aAAA,oBAAC,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAgB,EAAA,CAAA;AAAA,IAAA;AAGvE,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAEb,aACG;AAEI,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useState,\n} from 'rehackt'\nimport { Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { FieldComponent, UseField } from './useField'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: PropsWithChildren) => JSX.Element\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      /**\n      TypeScript versions <=5.0.4 have a bug that prevents\n      the type of the `TSelected` generic from being inferred\n      from the return type of this method.\n\n      In these versions, `TSelected` will fall back to the default\n      type (or `unknown` if that's not defined).\n\n      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n      */\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n    }) => JSX.Element\n  }\n}\n\nexport function useForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n  const [formApi] = useState(() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = function Provider(props) {\n      useIsomorphicLayoutEffect(api.mount, [])\n      return (\n        <formContext.Provider {...props} value={{ formApi: api as never }} />\n      )\n    }\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store as any, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store as any, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.useStore((state) => state.isSubmitting)\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 as any\n}\n"],"names":[],"mappings":";;;;;;;AAyCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEnD,QAAA,WAAW,SAAS,SAAS,OAAO;AACZ,gCAAA,IAAI,OAAO,CAAA,CAAE;AAErC,aAAA,oBAAC,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAgB,EAAA,CAAA;AAAA,IAAA;AAGvE,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAEb,aACG;AAEI,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "@tanstack/react-store": "^0.3.1",
     "decode-formdata": "^0.4.0",
     "rehackt": "^0.0.3",
-    "@tanstack/form-core": "0.13.6"
+    "@tanstack/form-core": "0.13.7"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"
@@ -52,7 +52,7 @@
     "clean": "rimraf ./dist && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types:versions49": "node ../../node_modules/typescript49/lib/tsc.js --project tsconfig.legacy.json",
-    "test:types:versions50": "node ../../node_modules/typescript50/lib/tsc.js",
+    "test:types:versions50": "node ../../node_modules/typescript50/lib/tsc.js --project tsconfig.50.json",
     "test:types:versions51": "node ../../node_modules/typescript51/lib/tsc.js",
     "test:types:versions52": "tsc",
     "test:types": "pnpm run \"/^test:types:versions.*/\"",

package/src/tests/useField.test.tsx

@@ -3,9 +3,9 @@ import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
-import { createFormFactory } from '../index'
+import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
-import type { FormApi } from '../index'
+import type { FieldApi, FormApi } from '../index'
 
 const user = userEvent.setup()
 
@@ -101,7 +101,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
         <form.Provider>
@@ -143,7 +148,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
         <form.Provider>
@@ -188,7 +198,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
         <form.Provider>
@@ -239,7 +254,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
         <form.Provider>
@@ -288,7 +308,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
         <form.Provider>
@@ -346,7 +371,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
         <form.Provider>
@@ -395,7 +425,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
     let form: FormApi<Person> | null = null
     function Comp() {
-      form = formFactory.useForm()
+      form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
       return (
         <form.Provider>
           <form.Field
@@ -433,7 +468,12 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
     let form: FormApi<Person> | null = null
     function Comp() {
-      form = formFactory.useForm()
+      form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
       return (
         <form.Provider>
           <form.Field
@@ -462,4 +502,115 @@ describe('useField', () => {
     const info = form!.fieldInfo
     expect(Object.keys(info)).toHaveLength(0)
   })
+
+  it('should handle strict mode properly with conditional fields', async () => {
+    function FieldInfo({ field }: { field: FieldApi<any, any> }) {
+      return (
+        <>
+          {field.state.meta.touchedErrors ? (
+            <em>{field.state.meta.touchedErrors}</em>
+          ) : null}
+          {field.state.meta.isValidating ? 'Validating...' : null}
+        </>
+      )
+    }
+
+    function Comp() {
+      const [showField, setShowField] = React.useState(true)
+
+      const form = useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onSubmit: async () => {},
+      })
+
+      return (
+        <div>
+          <form.Provider>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                void form.handleSubmit()
+              }}
+            >
+              <div>
+                {/* A type-safe field component*/}
+                {showField ? (
+                  <form.Field
+                    name="firstName"
+                    validators={{
+                      onChange: ({ value }) =>
+                        !value ? 'A first name is required' : undefined,
+                    }}
+                    children={(field) => {
+                      // Avoid hasty abstractions. Render props are great!
+                      return (
+                        <>
+                          <label htmlFor={field.name}>First Name:</label>
+                          <input
+                            name={field.name}
+                            value={field.state.value}
+                            onBlur={field.handleBlur}
+                            onChange={(e) => field.handleChange(e.target.value)}
+                          />
+                          <FieldInfo field={field} />
+                        </>
+                      )
+                    }}
+                  />
+                ) : null}
+              </div>
+              <div>
+                <form.Field
+                  name="lastName"
+                  children={(field) => (
+                    <>
+                      <label htmlFor={field.name}>Last Name:</label>
+                      <input
+                        name={field.name}
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                      />
+                      <FieldInfo field={field} />
+                    </>
+                  )}
+                />
+              </div>
+              <form.Subscribe
+                selector={(state) => [state.canSubmit, state.isSubmitting]}
+                children={([canSubmit, isSubmitting]) => (
+                  <button type="submit" disabled={!canSubmit}>
+                    {isSubmitting ? '...' : 'Submit'}
+                  </button>
+                )}
+              />
+              <button
+                type="button"
+                onClick={() => setShowField((prev) => !prev)}
+              >
+                {showField ? 'Hide field' : 'Show field'}
+              </button>
+            </form>
+          </form.Provider>
+        </div>
+      )
+    }
+
+    const { getByText, findByText, queryByText } = render(
+      <React.StrictMode>
+        <Comp />
+      </React.StrictMode>,
+    )
+
+    await user.click(getByText('Submit'))
+    expect(await findByText('A first name is required')).toBeInTheDocument()
+    await user.click(getByText('Hide field'))
+    await user.click(getByText('Submit'))
+    expect(queryByText('A first name is required')).not.toBeInTheDocument()
+  })
 })

package/src/tests/useForm.test.tsx

@@ -172,6 +172,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChange() {
             return error
@@ -217,6 +221,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChange: ({ value }) =>
             value.firstName === 'other' ? error : undefined,
@@ -262,6 +270,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChange: ({ value }) =>
             value.firstName === 'other' ? error : undefined,
@@ -362,6 +374,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChangeAsync: async () => {
             await sleep(10)
@@ -412,6 +428,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChangeAsync: async () => {
             await sleep(10)
@@ -472,6 +492,10 @@ describe('useForm', () => {
 
     function Comp() {
       const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
         validators: {
           onChangeAsyncDebounceMs: 100,
           onChangeAsync: async () => {

package/src/useField.tsx

@@ -1,9 +1,8 @@
-import React, { useRef, useState } from 'rehackt'
+import React, { useState } from 'rehackt'
 import { useStore } from '@tanstack/react-store'
 import { FieldApi, functionalUpdate } from '@tanstack/form-core'
 import { formContext, useFormContext } from './formContext'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
-import { useIsomorphicEffectOnce } from './useIsomorphicEffectOnce'
 import type { UseFieldOptions } from './types'
 import type {
   DeepKeys,
@@ -88,6 +87,8 @@ export function useField<
     return api
   })
 
+  useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
+
   /**
    * fieldApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.
@@ -104,19 +105,6 @@ export function useField<
         }
       : undefined,
   )
-  const unmountFn = useRef<(() => void) | null>(null)
-
-  useIsomorphicEffectOnce(() => {
-    return () => {
-      unmountFn.current?.()
-    }
-  })
-
-  // We have to mount it right as soon as it renders, otherwise we get:
-  // https://github.com/TanStack/form/issues/523
-  if (!unmountFn.current) {
-    unmountFn.current = fieldApi.mount()
-  }
 
   return fieldApi as never
 }

package/src/useForm.tsx

@@ -22,6 +22,17 @@ declare module '@tanstack/form-core' {
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => TSelected
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+      /**
+      TypeScript versions <=5.0.4 have a bug that prevents
+      the type of the `TSelected` generic from being inferred
+      from the return type of this method.
+
+      In these versions, `TSelected` will fall back to the default
+      type (or `unknown` if that's not defined).
+
+      @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}
+      @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}
+      */
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
       children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode
     }) => JSX.Element
@@ -35,7 +46,6 @@ export function useForm<
   opts?: FormOptions<TFormData, TFormValidator>,
 ): FormApi<TFormData, TFormValidator> {
   const [formApi] = useState(() => {
-    // @ts-ignore
     const api = new FormApi<TFormData, TFormValidator>(opts)
 
     api.Provider = function Provider(props) {

package/dist/cjs/useIsomorphicEffectOnce.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rehackt = require("rehackt");
-const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
-const useIsomorphicEffectOnce = (effect) => {
-  const destroyFunc = rehackt.useRef();
-  const effectCalled = rehackt.useRef(false);
-  const renderAfterCalled = rehackt.useRef(false);
-  const [val, setVal] = rehackt.useState(0);
-  if (effectCalled.current) {
-    renderAfterCalled.current = true;
-  }
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (!effectCalled.current) {
-      destroyFunc.current = effect();
-      effectCalled.current = true;
-    }
-    setVal((v) => v + 1);
-    return () => {
-      if (!renderAfterCalled.current) {
-        return;
-      }
-      if (destroyFunc.current) {
-        destroyFunc.current();
-      }
-    };
-  }, []);
-};
-exports.useIsomorphicEffectOnce = useIsomorphicEffectOnce;
-//# sourceMappingURL=useIsomorphicEffectOnce.cjs.map

package/dist/cjs/useIsomorphicEffectOnce.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicEffectOnce.cjs","sources":["../../src/useIsomorphicEffectOnce.ts"],"sourcesContent":["import { useRef, useState } from 'rehackt'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { EffectCallback } from 'rehackt'\n\n/**\n * This hook handles StrictMode and prod mode\n */\nexport const useIsomorphicEffectOnce = (effect: EffectCallback) => {\n  const destroyFunc = useRef<void | (() => void)>()\n  const effectCalled = useRef(false)\n  const renderAfterCalled = useRef(false)\n  const [val, setVal] = useState(0)\n\n  if (effectCalled.current) {\n    renderAfterCalled.current = true\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    // only execute the effect first time around\n    if (!effectCalled.current) {\n      destroyFunc.current = effect()\n      effectCalled.current = true\n    }\n\n    // this forces one render after the effect is run\n    setVal((v) => v + 1)\n\n    return () => {\n      // if the comp didn't render since the useEffect was called,\n      // we know it's the dummy React cycle\n      if (!renderAfterCalled.current) {\n        return\n      }\n      if (destroyFunc.current) {\n        destroyFunc.current()\n      }\n    }\n  }, [])\n}\n"],"names":["useRef","useState","useIsomorphicLayoutEffect"],"mappings":";;;;AAOa,MAAA,0BAA0B,CAAC,WAA2B;AACjE,QAAM,cAAcA,QAAAA;AACd,QAAA,eAAeA,eAAO,KAAK;AAC3B,QAAA,oBAAoBA,eAAO,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAIC,iBAAS,CAAC;AAEhC,MAAI,aAAa,SAAS;AACxB,sBAAkB,UAAU;AAAA,EAC9B;AAEAC,4BAAAA,0BAA0B,MAAM;AAE1B,QAAA,CAAC,aAAa,SAAS;AACzB,kBAAY,UAAU;AACtB,mBAAa,UAAU;AAAA,IACzB;AAGO,WAAA,CAAC,MAAM,IAAI,CAAC;AAEnB,WAAO,MAAM;AAGP,UAAA,CAAC,kBAAkB,SAAS;AAC9B;AAAA,MACF;AACA,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAE,CAAA;AACP;;"}

package/dist/cjs/useIsomorphicEffectOnce.d.cts

@@ -1,5 +0,0 @@
-import type { EffectCallback } from 'rehackt';
-/**
- * This hook handles StrictMode and prod mode
- */
-export declare const useIsomorphicEffectOnce: (effect: EffectCallback) => void;

package/dist/esm/useIsomorphicEffectOnce.d.ts

@@ -1,5 +0,0 @@
-import type { EffectCallback } from 'rehackt';
-/**
- * This hook handles StrictMode and prod mode
- */
-export declare const useIsomorphicEffectOnce: (effect: EffectCallback) => void;

package/dist/esm/useIsomorphicEffectOnce.js

@@ -1,30 +0,0 @@
-import { useRef, useState } from "rehackt";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
-const useIsomorphicEffectOnce = (effect) => {
-  const destroyFunc = useRef();
-  const effectCalled = useRef(false);
-  const renderAfterCalled = useRef(false);
-  const [val, setVal] = useState(0);
-  if (effectCalled.current) {
-    renderAfterCalled.current = true;
-  }
-  useIsomorphicLayoutEffect(() => {
-    if (!effectCalled.current) {
-      destroyFunc.current = effect();
-      effectCalled.current = true;
-    }
-    setVal((v) => v + 1);
-    return () => {
-      if (!renderAfterCalled.current) {
-        return;
-      }
-      if (destroyFunc.current) {
-        destroyFunc.current();
-      }
-    };
-  }, []);
-};
-export {
-  useIsomorphicEffectOnce
-};
-//# sourceMappingURL=useIsomorphicEffectOnce.js.map

package/dist/esm/useIsomorphicEffectOnce.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicEffectOnce.js","sources":["../../src/useIsomorphicEffectOnce.ts"],"sourcesContent":["import { useRef, useState } from 'rehackt'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { EffectCallback } from 'rehackt'\n\n/**\n * This hook handles StrictMode and prod mode\n */\nexport const useIsomorphicEffectOnce = (effect: EffectCallback) => {\n  const destroyFunc = useRef<void | (() => void)>()\n  const effectCalled = useRef(false)\n  const renderAfterCalled = useRef(false)\n  const [val, setVal] = useState(0)\n\n  if (effectCalled.current) {\n    renderAfterCalled.current = true\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    // only execute the effect first time around\n    if (!effectCalled.current) {\n      destroyFunc.current = effect()\n      effectCalled.current = true\n    }\n\n    // this forces one render after the effect is run\n    setVal((v) => v + 1)\n\n    return () => {\n      // if the comp didn't render since the useEffect was called,\n      // we know it's the dummy React cycle\n      if (!renderAfterCalled.current) {\n        return\n      }\n      if (destroyFunc.current) {\n        destroyFunc.current()\n      }\n    }\n  }, [])\n}\n"],"names":[],"mappings":";;AAOa,MAAA,0BAA0B,CAAC,WAA2B;AACjE,QAAM,cAAc;AACd,QAAA,eAAe,OAAO,KAAK;AAC3B,QAAA,oBAAoB,OAAO,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAEhC,MAAI,aAAa,SAAS;AACxB,sBAAkB,UAAU;AAAA,EAC9B;AAEA,4BAA0B,MAAM;AAE1B,QAAA,CAAC,aAAa,SAAS;AACzB,kBAAY,UAAU;AACtB,mBAAa,UAAU;AAAA,IACzB;AAGO,WAAA,CAAC,MAAM,IAAI,CAAC;AAEnB,WAAO,MAAM;AAGP,UAAA,CAAC,kBAAkB,SAAS;AAC9B;AAAA,MACF;AACA,UAAI,YAAY,SAAS;AACvB,oBAAY,QAAQ;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAE,CAAA;AACP;"}

package/src/useIsomorphicEffectOnce.ts

@@ -1,39 +0,0 @@
-import { useRef, useState } from 'rehackt'
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
-import type { EffectCallback } from 'rehackt'
-
-/**
- * This hook handles StrictMode and prod mode
- */
-export const useIsomorphicEffectOnce = (effect: EffectCallback) => {
-  const destroyFunc = useRef<void | (() => void)>()
-  const effectCalled = useRef(false)
-  const renderAfterCalled = useRef(false)
-  const [val, setVal] = useState(0)
-
-  if (effectCalled.current) {
-    renderAfterCalled.current = true
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    // only execute the effect first time around
-    if (!effectCalled.current) {
-      destroyFunc.current = effect()
-      effectCalled.current = true
-    }
-
-    // this forces one render after the effect is run
-    setVal((v) => v + 1)
-
-    return () => {
-      // if the comp didn't render since the useEffect was called,
-      // we know it's the dummy React cycle
-      if (!renderAfterCalled.current) {
-        return
-      }
-      if (destroyFunc.current) {
-        destroyFunc.current()
-      }
-    }
-  }, [])
-}