feat(forms): include isRegistered flag on useFormControl2

Author: assisrafael

demo/Form2Examples.jsx

@@ -85,15 +85,15 @@ function FormVersion() {
 }
 
 function FormArray() {
-  const { getValue, setValue } = useFormControl2('arr');
+  const { getValue, setValue, isRegistered } = useFormControl2('arr');
 
   useEffect(() => {
-    setValue((prev) => {
-      console.log('useEffect.setValue [arr] :>> ', prev, getValue());
-
-      return prev;
-    });
-  }, [getValue, setValue]);
+    if (isRegistered()) {
+      console.log('initialized value [arr] :>> ', getValue());
+    } else {
+      console.log('uninitialized value [arr] :>> ', getValue());
+    }
+  }, [getValue, setValue, isRegistered]);
 
   return (getValue() || []).map((v, index) => <FormInput2 key={index} name={`arr[${index}]`} />);
 }

src/forms2/helpers/useFormControl.jsx

@@ -6,6 +6,7 @@ import { FormContext } from './useFormHelper';
 export function useFormControl2(name, type) {
   const formHelper = useContext(FormContext);
   const [value, _setValue] = useState('');
+  const [isRegistered, setIsRegistered] = useState(false);
 
   const setValue = useCallback(
     (newValue) => {
@@ -39,6 +40,7 @@ export function useFormControl2(name, type) {
     formHelper.register(name, {
       setValue: _setValue,
     });
+    setIsRegistered(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -47,6 +49,9 @@ export function useFormControl2(name, type) {
       return value;
     },
     setValue,
+    isRegistered() {
+      return isRegistered;
+    },
     handleOnChangeFactory: (afterChange, type) => (e) => {
       const newValue = handleOnChange(e, type);