docs: fix useForm API - remove resetField/resetUntouched

These methods are not exported by useForm hook, only by useFormMethods.
Docs incorrectly claimed useForm returns resetField and resetUntouched.

Author: darianstlex

.editorconfig

@@ -7,5 +7,4 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
-quote_type = single
 max_line_length = 120

docs-site/docs/api/useForm.md

@@ -29,8 +29,6 @@ function useForm(formName?: string): {
   change: EventCallable<IValuePayload>;
   erase: EventCallable<void>;
   reset: EventCallable<void>;
-  resetField: EventCallable<string>;
-  resetUntouched: EventCallable<string[]>;
   setActive: EventCallable<IBooleanPayload>;
   setValues: EventCallable<IRValues>;
   setErrors: EventCallable<IRErrors>;

playwright/index.tsx

@@ -1,3 +1,6 @@
+import React from 'react';
+
+// @ts-expect-error css
 import './index.css';
 
 import { beforeMount } from '@playwright/experimental-ct-react/hooks';

src/FieldComponent.tsx

@@ -1,13 +1,20 @@
-import React, { useCallback, useEffect, useMemo, memo } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, memo } from 'react';
 import type { ComponentType } from 'react';
 import { useUnit } from 'effector-react';
 import pickBy from 'lodash/pickBy';
 
 import { FIELD_CONFIG } from './constants';
-import type { IRFieldProps, IValue } from './types';
+import type { IFieldProps, IForm, IRFieldProps, IValue } from './types';
 import { useFormInstance } from './useFormInstance';
 import { useStoreProp } from './useStoreProp';
 
+const useValue = (form: IForm, name: string) => {
+  const fieldValue = useStoreProp(form.$values, name);
+  const format = useStoreProp(form.$fieldsConfig, `${name}.format`, FIELD_CONFIG.format) as IFieldProps['format'];
+
+  return useMemo(() => format(fieldValue), [fieldValue, name]);
+};
+
 const InternalFieldInst = ({ Field, name, formName, ...rest }: {
   name: string;
   formName?: string;
@@ -16,7 +23,6 @@ const InternalFieldInst = ({ Field, name, formName, ...rest }: {
   const form = useFormInstance(formName);
   const [onFieldBlur, onFieldChange] = useUnit([form.onBlur, form.onChange]);
 
-  const fieldValue = useStoreProp(form.$values, name);
   const error = useStoreProp(form.$error, name, null);
   const errors = useStoreProp(form.$errors, name, null);
 
@@ -28,10 +34,7 @@ const InternalFieldInst = ({ Field, name, formName, ...rest }: {
     onFieldBlur({ name, value });
   }, [name, onFieldBlur]);
 
-  const value = useMemo(() => {
-    const format = form.configs?.[name]?.format || FIELD_CONFIG.format!;
-    return format(fieldValue);
-  }, [fieldValue, form.configs, name]);
+  const value = useValue(form, name);
 
   return (<Field {...{ error, errors, name, value, onChange, onBlur, ...rest }} />);
 };
@@ -57,9 +60,15 @@ export const Field = ({
 }: IRFieldProps) => {
   const form = useFormInstance(formName);
 
-  const [setActive, resetUntouched] = useUnit([form.setActive, form.resetUntouched]);
+  const formDisableFieldsReinit = useStoreProp(form.$formConfig, 'disableFieldsReinit');
+
+  const [setActive, resetUntouched, setFieldConfig] = useUnit([
+    form.setActive,
+    form.resetUntouched,
+    form.setFieldConfig,
+  ]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const config = pickBy(
       {
         parse,
@@ -72,7 +81,7 @@ export const Field = ({
       },
       (val) => val !== undefined,
     );
-    !passive && form.setFieldConfig({ name, ...config });
+    !passive && setFieldConfig({ name, ...config });
   }, [
     disableFieldReinit,
     validateOnChange,
@@ -86,7 +95,7 @@ export const Field = ({
     form,
   ]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     !passive && setActive({ name, value: true });
     return () => {
       !passive && setActive({ name, value: false });
@@ -96,9 +105,9 @@ export const Field = ({
   const reinitDisabled =
     !passive && disableFieldReinit !== undefined
       ? disableFieldReinit
-      : form.config.disableFieldsReinit;
+      : formDisableFieldsReinit;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!reinitDisabled && initialValue !== undefined) {
       Promise.resolve().then(() => resetUntouched([name]));
     }

src/FormComponent.tsx

@@ -1,13 +1,13 @@
+import React, { useLayoutEffect } from 'react';
 import type { SubmitEvent } from 'react';
-import React, { useMemo, useEffect } from 'react';
 import { useUnit } from 'effector-react';
 import pickBy from 'lodash/pickBy';
 import isEmpty from 'lodash/isEmpty';
 
 import { FORM_CONFIG } from './constants';
-import { getForm } from './forms';
-import type { IForm, IRFormProps } from './types';
 import { FormProvider } from './context';
+import type { IRFormProps } from './types';
+import { useFormInstance } from './useFormInstance';
 
 /**
  * Efx Form component
@@ -26,33 +26,19 @@ export const Form = ({
   serialize,
   ...props
 }: IRFormProps) => {
-  const form: IForm = useMemo(() => {
-    const config = pickBy(
-      {
-        keepOnUnmount,
-        skipClientValidation,
-        initialValues,
-        validateOnBlur,
-        validateOnChange,
-        validators,
-        disableFieldsReinit,
-        serialize,
-      },
-      (val) => val !== undefined,
-    );
-    return getForm({ name, ...config });
-  }, [name]);
+  const form = useFormInstance(name);
 
-  const [formSubmit, formReset, resetUntouched] = useUnit([
+  const [formSubmit, formReset, resetUntouched, setConfig] = useUnit([
     form.submit,
     form.reset,
     form.resetUntouched,
+    form.setConfig,
   ]);
 
   /**
    * Set config on config props changes
    */
-  useEffect(() => {
+  useLayoutEffect(() => {
     const config = pickBy(
       {
         serialize,
@@ -66,7 +52,7 @@ export const Form = ({
       },
       (val) => val !== undefined,
     );
-    form.setConfig({ name, ...config });
+    setConfig({ name, ...config });
   }, [
     skipClientValidation,
     disableFieldsReinit,
@@ -83,13 +69,13 @@ export const Form = ({
   /**
    * Reset form on unmount if enabled
    */
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       !keepOnUnmount && formReset();
     };
   }, [formReset, keepOnUnmount]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!disableFieldsReinit && !isEmpty(initialValues)) {
       resetUntouched(Object.keys(initialValues));
     }