🐞 fix #9773 useFormState missing state update (#9777)

* 🐞 fix #9773 useFormState missing state update

* update api extrator

* fix automation caught issue

cypress/e2e/useFormState.cy.ts

@@ -47,9 +47,9 @@ describe('useFormState', () => {
           'maxDate',
           'minLength',
         ],
-        isSubmitted: false,
+        isSubmitted: true,
         isSubmitSuccessful: false,
-        submitCount: 0,
+        submitCount: 1,
         isValid: false,
       }),
     );
@@ -93,9 +93,9 @@ describe('useFormState', () => {
           'minLength',
           'minRequiredLength',
         ],
-        isSubmitted: false,
+        isSubmitted: true,
         isSubmitSuccessful: false,
-        submitCount: 0,
+        submitCount: 1,
         isValid: true,
       }),
     );
@@ -135,7 +135,7 @@ describe('useFormState', () => {
         ],
         isSubmitted: true,
         isSubmitSuccessful: true,
-        submitCount: 1,
+        submitCount: 2,
         isValid: true,
       }),
     );

reports/api-extractor.md

@@ -52,6 +52,7 @@ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = a
     _getDirty: GetIsDirty;
     _formState: FormState<TFieldValues>;
     _updateValid: (shouldUpdateValid?: boolean) => void;
+    _updateFormState: (formState: Partial<FormState<TFieldValues>>) => void;
     _fields: FieldRefs;
     _formValues: FieldValues;
     _proxyFormState: ReadFormState;

src/__tests__/useFormState.test.tsx

@@ -744,4 +744,37 @@ describe('useFormState', () => {
     expect(await screen.findByText('dirty')).toBeVisible();
     expect(await screen.findByText('valid')).toBeVisible();
   });
+
+  it('should subscribe and update formState', async () => {
+    function App() {
+      const { register, control, handleSubmit } = useForm({
+        defaultValues: {
+          firstName: '',
+        },
+      });
+      const { errors } = useFormState({ control });
+
+      return (
+        <form onSubmit={handleSubmit(() => {})}>
+          <input {...register('firstName', { required: 'Required' })} />
+          <p>{errors.firstName?.message}</p>
+          <button>Submit</button>
+        </form>
+      );
+    }
+
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button'));
+
+    waitFor(() => screen.getByText('Required'));
+
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: 'data' },
+    });
+
+    waitFor(() =>
+      expect(screen.queryByText('Required')).not.toBeInTheDocument(),
+    );
+  });
 });

src/logic/createFormControl.ts

@@ -1226,6 +1226,15 @@ export function createFormControl<
     }
   };
 
+  const _updateFormState = (
+    updatedFormState: Partial<FormState<TFieldValues>>,
+  ) => {
+    _formState = {
+      ..._formState,
+      ...updatedFormState,
+    };
+  };
+
   if (isFunction(_options.defaultValues)) {
     _options.defaultValues().then((values) => {
       reset(values, _options.resetOptions);
@@ -1249,6 +1258,7 @@ export function createFormControl<
       _updateFieldArray,
       _getFieldArray,
       _reset,
+      _updateFormState,
       _subjects,
       _proxyFormState,
       get _fields() {

src/logic/shouldRenderFormState.ts

@@ -1,12 +1,20 @@
 import { VALIDATION_MODE } from '../constants';
-import { ReadFormState } from '../types';
+import {
+  Control,
+  FieldValues,
+  FormState,
+  InternalFieldName,
+  ReadFormState,
+} from '../types';
 import isEmptyObject from '../utils/isEmptyObject';
 
-export default <T extends Record<string, any>, K extends ReadFormState>(
-  formStateData: T,
+export default <T extends FieldValues, K extends ReadFormState>(
+  formStateData: Partial<FormState<T>> & { name?: InternalFieldName },
   _proxyFormState: K,
+  updateFormState: Control<T>['_updateFormState'],
   isRoot?: boolean,
 ) => {
+  updateFormState(formStateData);
   const { name, ...formState } = formStateData;
 
   return (

src/types/form.ts

@@ -748,6 +748,7 @@ export type Control<
   _getDirty: GetIsDirty;
   _formState: FormState<TFieldValues>;
   _updateValid: (shouldUpdateValid?: boolean) => void;
+  _updateFormState: (formState: Partial<FormState<TFieldValues>>) => void;
   _fields: FieldRefs;
   _formValues: FieldValues;
   _proxyFormState: ReadFormState;

src/useForm.ts

@@ -5,7 +5,13 @@ import getProxyFormState from './logic/getProxyFormState';
 import shouldRenderFormState from './logic/shouldRenderFormState';
 import deepEqual from './utils/deepEqual';
 import isFunction from './utils/isFunction';
-import { FieldValues, FormState, UseFormProps, UseFormReturn } from './types';
+import {
+  FieldValues,
+  FormState,
+  InternalFieldName,
+  UseFormProps,
+  UseFormReturn,
+} from './types';
 import { useSubscribe } from './useSubscribe';
 
 /**
@@ -77,13 +83,17 @@ export function useForm<
 
   useSubscribe({
     subject: control._subjects.state,
-    next: (value: FieldValues) => {
-      if (shouldRenderFormState(value, control._proxyFormState, true)) {
-        control._formState = {
-          ...control._formState,
-          ...value,
-        };
-
+    next: (
+      value: Partial<FormState<TFieldValues>> & { name?: InternalFieldName },
+    ) => {
+      if (
+        shouldRenderFormState(
+          value,
+          control._proxyFormState,
+          control._updateFormState,
+          true,
+        )
+      ) {
         updateFormState({ ...control._formState });
       }
     },

src/useFormState.ts

@@ -5,6 +5,7 @@ import shouldRenderFormState from './logic/shouldRenderFormState';
 import shouldSubscribeByName from './logic/shouldSubscribeByName';
 import {
   FieldValues,
+  FormState,
   InternalFieldName,
   UseFormStateProps,
   UseFormStateReturn,
@@ -64,14 +65,20 @@ function useFormState<TFieldValues extends FieldValues = FieldValues>(
 
   useSubscribe({
     disabled,
-    next: (value: { name?: InternalFieldName }) =>
+    next: (
+      value: Partial<FormState<TFieldValues>> & { name?: InternalFieldName },
+    ) =>
       _mounted.current &&
       shouldSubscribeByName(
         _name.current as InternalFieldName,
         value.name,
         exact,
       ) &&
-      shouldRenderFormState(value, _localProxyFormState.current) &&
+      shouldRenderFormState(
+        value,
+        _localProxyFormState.current,
+        control._updateFormState,
+      ) &&
       updateFormState({
         ...control._formState,
         ...value,