🌳 include flush root render method to createFormControl (#9479)

* include flush root render method to createFormControl

* update unit test

src/__tests__/useForm/reset.test.tsx

@@ -9,7 +9,12 @@ import {
 import { act, renderHook } from '@testing-library/react-hooks';
 
 import { Controller } from '../../controller';
-import { Control, UseFormRegister, UseFormReturn } from '../../types';
+import {
+  Control,
+  UseFormRegister,
+  UseFormReset,
+  UseFormReturn,
+} from '../../types';
 import { useController } from '../../useController';
 import { useFieldArray } from '../../useFieldArray';
 import { useForm } from '../../useForm';
@@ -1195,6 +1200,47 @@ describe('reset', () => {
     ).toEqual('changed2');
   });
 
+  it('should allow reset at child level before useForm mounted', () => {
+    type FormValues = {
+      firstName: string;
+    };
+
+    const NestChild = ({ reset }: { reset: UseFormReset<FormValues> }) => {
+      React.useEffect(() => {
+        reset({
+          firstName: 'test',
+        });
+      }, [reset]);
+
+      return null;
+    };
+
+    const Child = ({ reset }: { reset: UseFormReset<FormValues> }) => {
+      return <NestChild reset={reset} />;
+    };
+
+    function App() {
+      const { register, reset, handleSubmit } = useForm<FormValues>({
+        defaultValues: {
+          firstName: '',
+        },
+      });
+
+      return (
+        <form onSubmit={handleSubmit(() => {})}>
+          <input {...register('firstName')} />
+          <Child reset={reset} />
+        </form>
+      );
+    }
+
+    render(<App />);
+
+    expect((screen.getByRole('textbox') as HTMLInputElement).value).toEqual(
+      'test',
+    );
+  });
+
   it('should reset field array async', () => {
     let tempFields: unknown[] = [];
 

src/logic/createFormControl.ts

@@ -91,6 +91,7 @@ export function createFormControl<
   TContext = any,
 >(
   props: UseFormProps<TFieldValues, TContext> = {},
+  flushRootRender: () => void,
 ): Omit<UseFormReturn<TFieldValues, TContext>, 'formState'> {
   let _options = {
     ...defaultOptions,
@@ -641,6 +642,7 @@ export function createFormControl<
     _subjects.watch.next({
       name,
     });
+    !_stateFlags.mount && flushRootRender();
   };
 
   const onChange: ChangeHandler = async (event) => {
@@ -1173,6 +1175,8 @@ export function createFormControl<
       focus: '',
     };
 
+    !_stateFlags.mount && flushRootRender();
+
     _stateFlags.mount =
       !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
 

src/useForm.ts

@@ -60,7 +60,9 @@ export function useForm<
 
   if (!_formControl.current) {
     _formControl.current = {
-      ...createFormControl(props),
+      ...createFormControl(props, () =>
+        updateFormState((formState) => ({ ...formState })),
+      ),
       formState,
     };
   }