Merge pull request #760 from data-driven-forms/fix-use-field-references

fix(renderer): serialize validate config to prevent infinite loop

Author: Hyperkid123

packages/react-form-renderer/demo/index.js

@@ -1,17 +1,27 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import FormRenderer from '../src';
+import FormRenderer, { useFieldApi, validatorTypes, componentTypes } from '../src';
 import componentMapper from './form-fields-mapper';
 import FormTemplate from './form-template';
 
+// eslint-disable-next-line react/prop-types
+const TextField = ({ name, label }) => {
+  const { input } = useFieldApi({ name, validate: [{ type: validatorTypes.REQUIRED }] });
+  return (
+    <div>
+      <label>{label}</label>
+      <input {...input} />
+    </div>
+  );
+};
+
 const fileSchema = {
   fields: [
     {
       component: 'text-field',
-      name: 'file-upload',
-      type: 'file',
-      label: 'file upload'
+      name: 'foo',
+      label: 'Foo'
     }
   ]
 };
@@ -21,7 +31,10 @@ const App = () => {
   return (
     <div style={{ padding: 20 }}>
       <FormRenderer
-        componentMapper={componentMapper}
+        componentMapper={{
+          ...componentMapper,
+          [componentTypes.TEXT_FIELD]: TextField
+        }}
         onSubmit={(values, ...args) => console.log(values, args)}
         FormTemplate={FormTemplate}
         schema={fileSchema}

packages/react-form-renderer/src/files/use-field-api.js

@@ -96,7 +96,13 @@ const useFieldApi = ({ name, initializeOnMount, component, render, validate, res
         arrayValidator: calculateArrayValidator(props, validate, component, validatorMapper)
       });
     }
-  }, [validate, component, props.dataType]);
+    /**
+     * We have to stringify the validate array in order to preven infinite looping when validate was passed directly to useFieldApi
+     * const x = useFieldApu({name: 'foo', validate: [{type: 'bar'}]}) will trigger infinite looping witouth the serialize.
+     * Using stringify is acceptable here since the array is usually very small.
+     * If we notice performance hit, we can implement custom hook with a deep equal functionality.
+     */
+  }, [validate ? JSON.stringify(validate) : false, component, props.dataType]);
 
   /** Re-convert initialValue when changed */
   useEffect(() => {

packages/react-form-renderer/src/tests/form-renderer/use-field-api.test.js

@@ -6,6 +6,7 @@ import useFieldApi from '../../files/use-field-api';
 import componentTypes from '../../files/component-types';
 import Form from '../../files/form';
 import RendererContext from '../../files/renderer-context';
+import validatorTypes from '../../files/validator-types';
 
 describe('useFieldApi', () => {
   const Catcher = ({ children }) => children;
@@ -179,4 +180,39 @@ describe('useFieldApi', () => {
     expect(wrapper.find('input').prop('value')).toEqual('');
     expect(registerInputFileSpy).toHaveBeenCalledWith('file-input');
   });
+
+  it('should not crash when passing validate directly', () => {
+    const TestDummy = ({ validate }) => {
+      const { input } = useFieldApi({
+        name: 'foo',
+        validate: validate ? [{ type: validatorTypes.REQUIRED }] : [{ type: validatorTypes.URL }]
+      });
+      return <input {...input} id="foo" />;
+    };
+
+    const FormWrapper = ({ validate = true }) => (
+      <Form onSubmit={jest.fn()}>
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <RendererContext.Provider
+              value={{
+                validatorMapper: { required: () => (value) => (!value ? 'required' : undefined), url: () => jest.fn() },
+                formOptions: {}
+              }}
+            >
+              <TestDummy validate={validate} />
+            </RendererContext.Provider>
+          </form>
+        )}
+      </Form>
+    );
+
+    const wrapper = mount(<FormWrapper />);
+    expect(wrapper.find('input')).toHaveLength(1);
+    wrapper.find('#foo').simulate('change', { target: { value: 'bar' } });
+    wrapper.update();
+    wrapper.setProps({ validate: false });
+    wrapper.update();
+    expect(wrapper.find('input')).toHaveLength(1);
+  });
 });