implements static policies

src/client/components/forms/Form/fieldReducer.js

@@ -5,6 +5,12 @@ function fieldReducer(state, action) {
         ...action.value,
       };
 
+    case 'REMOVE': {
+      const newState = { ...state };
+      delete newState[action.path];
+      return newState;
+    }
+
     default: {
       const newField = {
         value: action.value,

src/client/components/forms/Form/index.js

@@ -59,7 +59,7 @@ const Form = (props) => {
   const contextRef = useRef({ ...initContextState });
 
   const [fields, dispatchFields] = useReducer(fieldReducer, {});
-  contextRef.current.fields = { ...fields };
+  contextRef.current.fields = fields;
   contextRef.current.dispatchFields = dispatchFields;
 
   contextRef.current.submit = (e) => {

src/client/components/forms/useFieldType/index.js

@@ -3,6 +3,7 @@ import {
 } from 'react';
 import FormContext from '../Form/FormContext';
 import useDebounce from '../../../hooks/useDebounce';
+import useUnmountEffect from '../../../hooks/useUnmountEffect';
 
 import './index.scss';
 
@@ -74,9 +75,9 @@ const useFieldType = (options) => {
 
   // Remove field from state on "unmount"
   // This is mostly used for repeater / flex content row modifications
-  useEffect(() => {
-    return () => dispatchFields({ path, type: 'REMOVE' });
-  }, [dispatchFields, path]);
+  useUnmountEffect(() => {
+    formContext.dispatchFields({ path, type: 'REMOVE' });
+  });
 
   // The only time that the FORM value should be updated
   // is when the debounced value updates. So, when the debounced value updates,

src/client/hooks/useUnmountEffect.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+
+const useUnmountEffect = callback => useEffect(() => {
+  return callback;
+}, []);
+
+export default useUnmountEffect;