Use useReducer instead of useState

Author: rvsia

packages/react-form-renderer/src/form-renderer/condition.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import lodashIsEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
@@ -87,27 +87,47 @@ export const parseCondition = (condition, values) => {
   return negativeResult;
 };
 
+export const reducer = (state, { type, sets }) => {
+  switch (type) {
+    case 'formResetted':
+      return {
+        ...state,
+        initial: true
+      };
+    case 'rememberSets':
+      return {
+        ...state,
+        initial: false,
+        sets
+      };
+    default:
+      return state;
+  }
+};
+
 const Condition = React.memo(
   ({ condition, children, values }) => {
     const formOptions = useFormApi();
     const dirty = formOptions.getState().dirty;
 
-    const [lastSets, setSets] = React.useState([]);
-    const [initial, setInitial] = React.useState(true);
+    const [state, dispatch] = useReducer(reducer, {
+      sets: [],
+      initial: true
+    });
 
     const conditionResult = parseCondition(condition, values, formOptions);
     const setters = conditionResult.set ? [conditionResult.set] : conditionResult.sets;
 
     useEffect(() => {
       if (!dirty) {
-        setInitial(true);
+        dispatch({ type: 'formResetted' });
       }
     }, [dirty]);
 
     useEffect(() => {
-      if (setters && setters.length > 0 && (initial || !isEqual(setters, lastSets))) {
+      if (setters && setters.length > 0 && (state.initial || !isEqual(setters, state.sets))) {
         setters.forEach((setter, index) => {
-          if (setter && (initial || !isEqual(setter, lastSets[index]))) {
+          if (setter && (state.initial || !isEqual(setter, state.sets[index]))) {
             setTimeout(() => {
               formOptions.batch(() => {
                 Object.entries(setter).forEach(([name, value]) => {
@@ -117,10 +137,9 @@ const Condition = React.memo(
             });
           }
         });
-        setSets(setters);
-        setInitial(false);
+        dispatch({ type: 'rememberSets', sets: setters });
       }
-    }, [setters, initial]);
+    }, [setters, state.initial]);
 
     return conditionResult.visible ? children : null;
   },

packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap

@@ -162,15 +162,15 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
               <FormFieldHideWrapper
                 hideField={false}
               >
-                <Component
+                <select
                   name="secret"
                 >
                   <div
                     className="nested-item"
                   >
                     Select field
                   </div>
-                </Component>
+                </select>
               </FormFieldHideWrapper>
             </FormConditionWrapper>
           </SingleField>

packages/react-form-renderer/src/tests/form-renderer/__snapshots__/render-form.test.js.snap

@@ -451,15 +451,15 @@ exports[`renderForm function should render single field from defined componentTy
         <FormFieldHideWrapper
           hideField={false}
         >
-          <Component
+          <text-field
             name="foo"
           >
             <div
               name="foo"
             >
               TextField
             </div>
-          </Component>
+          </text-field>
         </FormFieldHideWrapper>
       </FormConditionWrapper>
     </SingleField>

packages/react-form-renderer/src/tests/form-renderer/condition.test.js

@@ -7,6 +7,8 @@ import componentTypes from '../../../dist/cjs/component-types';
 import useFieldApi from '../../files/use-field-api';
 import FormRenderer from '../../files/form-renderer';
 
+import { reducer } from '../../form-renderer/condition';
+
 const TextField = (props) => {
   const { input } = useFieldApi(props);
   return <input id={input.name} {...input} />;
@@ -306,4 +308,14 @@ describe('condition test', () => {
       'field-5': 'someValuu5'
     });
   });
+
+  describe('reducer', () => {
+    it('returns default', () => {
+      const initialState = {
+        a: 'bb'
+      };
+
+      expect(reducer(initialState, { type: 'nonsesne' })).toEqual(initialState);
+    });
+  });
 });