fix: update subscribe function

Author: adyfk

src/v2/hooks/useContainer.ts

@@ -1,11 +1,8 @@
-import {
-  useCallback, useContext, useEffect, useRef,
-} from "react";
-import useSubscribe from "./useSubscribe";
-import useUpdate from "./useUpdate";
-import { IForm, IState, initializeState } from "../logic/createForm";
+import { useContext } from "react";
+import { IForm } from "../logic/createForm";
 import { FormContext } from "../contexts/FormContext";
 import { ISchema } from "../types";
+import useSubscribeAndCompare from "./useSubscribeAndCompare";
 // import type { ISchema } from "../../types";
 
 export const useContainer = (props: {
@@ -15,34 +12,15 @@ export const useContainer = (props: {
 }) => {
   const { form: formContext } = useContext(FormContext);
   const { form = formContext } = props as { form: IForm<ISchema> };
-  const _state = useRef<IState["containerFormState"]>(structuredClone(initializeState.containerFormState));
-  const update = useUpdate();
 
-  const latestState = useCallback(
-    () => {
-      const latestState = _state.current;
-      const { containerFormState } = form.state;
-      if (JSON.stringify(containerFormState) !== JSON.stringify(latestState)) {
-        _state.current = containerFormState;
-        update();
-      }
-    },
-    [],
-  );
-
-  useSubscribe({
+  useSubscribeAndCompare({
     form,
-    callback: latestState,
     subject: "containers",
   });
 
-  useEffect(() => {
-    latestState();
-  }, []);
-
   return {
     form,
-    state: _state.current,
+    state: form.state.containerFormState,
   };
 };
 

src/v2/hooks/useField.ts

@@ -4,11 +4,10 @@ import {
   useEffect,
   useRef,
 } from "react";
-import useSubscribe from "./useSubscribe";
-import useUpdate from "./useUpdate";
 import type { IForm } from "../logic/createForm";
 import { IDefaultProp, ISchemaFieldCore } from "../types";
 import { FormContext } from "../contexts/FormContext";
+import useSubscribeAndCompare from "./useSubscribeAndCompare";
 
 // eslint-disable-next-line no-use-before-define
 export const useField = <TSchema extends ISchemaFieldCore>(props: {
@@ -20,30 +19,19 @@ export const useField = <TSchema extends ISchemaFieldCore>(props: {
   const { form: formContext } = useContext(FormContext);
   const { form = formContext, schema } = props as { form: IForm<TSchema>, schema: TSchema };
   const _ref = useRef<any>();
-  const _state = useRef({});
-  const update = useUpdate();
 
-  const latestState = useCallback(
-    () => {
-      const latestState = _state.current;
-      const state = form.getSchemaFieldState(schema as any);
-      if (JSON.stringify(state) !== JSON.stringify(latestState)) {
-        _state.current = structuredClone(state);
-        update();
-      }
-    },
-    [schema],
-  );
-
-  useSubscribe({
+  useSubscribeAndCompare({
     form,
-    callback: latestState,
+    getState() {
+      return form.getSchemaFieldState(schema as any);
+    },
     subject: "fields",
   });
 
-  useEffect(() => {
-    latestState();
-  }, [schema]);
+  useSubscribeAndCompare({
+    form,
+    subject: "containers",
+  });
 
   useEffect(() => {
     form.fieldRef[schema.config.name] = _ref;

src/v2/hooks/useFieldArray.ts

@@ -4,11 +4,10 @@ import {
   useEffect,
   useRef,
 } from "react";
-import useSubscribe from "./useSubscribe";
-import useUpdate from "./useUpdate";
 import type { IEventCallback, IForm } from "../logic/createForm";
 import { IDefaultProp, ISchemaFieldCore } from "../types";
 import { FormContext } from "../contexts/FormContext";
+import useSubscribeAndCompare from "./useSubscribeAndCompare";
 
 // eslint-disable-next-line no-use-before-define
 export const useFieldForm = <TSchema extends ISchemaFieldCore>(props: {
@@ -20,31 +19,15 @@ export const useFieldForm = <TSchema extends ISchemaFieldCore>(props: {
   const { form: formContext } = useContext(FormContext);
   const { form = formContext, schema } = props as { form: IForm<TSchema>, schema: TSchema };
   const _ref = useRef<any>();
-  const _state = useRef({});
-  const update = useUpdate();
 
-  const latestState = useCallback(
-    () => {
-      const latestState = _state.current;
-      const state = form.getSchemaFieldState(schema as any);
-      if (JSON.stringify(state) !== JSON.stringify(latestState)) {
-        _state.current = state;
-        update();
-      }
-    },
-    [schema],
-  );
-
-  useSubscribe({
+  useSubscribeAndCompare({
     form,
-    callback: latestState,
+    getState() {
+      return form.getSchemaFieldState(schema as any);
+    },
     subject: "fields",
   });
 
-  useEffect(() => {
-    latestState();
-  }, [schema]);
-
   useEffect(() => {
     form.fieldRef[schema.config.name] = _ref;
     return () => {

src/v2/hooks/useFieldForm.ts

@@ -1,38 +1,25 @@
 import {
-  useCallback, useEffect, useRef,
+  useEffect, useRef,
 } from "react";
 import createForm, {
-  IForm, ICreateFormProps, IState, initializeState,
+  IForm, ICreateFormProps,
 } from "../logic/createForm";
 import useUpdate from "./useUpdate";
-import useSubscribe from "./useSubscribe";
+import useSubscribeAndCompare from "./useSubscribeAndCompare";
 
 export const useForm = <TSchema>(props: ICreateFormProps<TSchema>) => {
   const update = useUpdate();
   const _form = useRef<IForm<TSchema>>(null as any);
-  const _formState = useRef<IState["containerFormState"]>(structuredClone(initializeState.containerFormState));
 
   if (!_form.current) {
     _form.current = createForm<TSchema>(props);
   }
 
-  const latestState = useCallback(
-    () => {
-      update();
-    },
-    [],
-  );
-
-  useSubscribe({
+  useSubscribeAndCompare({
     form: _form.current,
-    callback: latestState,
     subject: "containers",
   });
 
-  useEffect(() => {
-    latestState();
-  }, []);
-
   useEffect(() => {
     _form.current.reset({
       schemas: props.schemas,
@@ -44,7 +31,7 @@ export const useForm = <TSchema>(props: ICreateFormProps<TSchema>) => {
 
   return {
     form: _form.current,
-    state: _formState.current,
+    state: _form.current.state.containerFormState,
     handleSubmit: _form.current.handleSubmit,
   };
 };

src/v2/hooks/useForm.ts

@@ -0,0 +1,42 @@
+import { useContext, useEffect } from "react";
+import type { ISubject } from "../logic/createForm";
+import { FormContext } from "../contexts/FormContext";
+import useUpdate from "./useUpdate";
+// import type { ISchema } from "../../types";
+
+type IUseSubscribeAndCompareProps = {
+  subject: keyof ISubject;
+  // eslint-disable-next-line no-unused-vars
+  form?: any;
+  disabled?: boolean;
+  getState?: () => any;
+}
+
+const useSubscribeAndCompare = (props: IUseSubscribeAndCompareProps) => {
+  const update = useUpdate();
+  const { form: formContext } = useContext(FormContext);
+  const {
+    form = formContext,
+    disabled,
+    subject = "fields",
+    getState,
+  } = props;
+
+  useEffect(() => {
+    if (disabled) return;
+
+    let prevState = structuredClone(getState?.());
+    const unsubscribe = form.subscribe(subject, () => {
+      if (!getState?.()) {
+        update();
+      } else if (JSON.stringify(prevState) !== JSON.stringify(getState())) {
+        prevState = structuredClone(getState());
+        update();
+      }
+    });
+    // eslint-disable-next-line consistent-return
+    return unsubscribe;
+  }, [disabled, form]);
+};
+
+export default useSubscribeAndCompare;