Merge pull request #1017 from data-driven-forms/renderer-optimization

Optimize condition and field array performance

Author: Hyperkid123

__mocks__/with-provider.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { RendererContext } from '@data-driven-forms/react-form-renderer';
 import Form from '@data-driven-forms/react-form-renderer/form';
 
-const RenderWithProvider = ({ value = { formOptions: {} }, children, onSubmit = () => {} }) => {
+const RenderWithProvider = ({ value = { formOptions: {internalRegisterField: jest.fn(), internalUnRegisterField: jest.fn()} }, children, onSubmit = () => {} }) => {
   return (
     <Form onSubmit={onSubmit}>
       {() => (

packages/ant-component-mapper/package.json

@@ -69,7 +69,8 @@
     "react-dom": ">=16.13.0"
   },
   "dependencies": {
-    "@data-driven-forms/common": "*"
+    "@data-driven-forms/common": "*",
+    "lodash": "^4.17.21"
   },
   "postpublish": "export RELEASE_DEMO=true"
 }

packages/ant-component-mapper/src/field-array/field-array.js

@@ -1,12 +1,13 @@
-import React, { useReducer } from 'react';
+import React, { memo, useReducer } from 'react';
+import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { useFieldApi, useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
 import { Row, Col, Button, Typography, Space } from 'antd';
 import { UndoOutlined, RedoOutlined } from '@ant-design/icons';
 
 import FormGroup from '../form-group';
 
-const ArrayItem = ({
+const ArrayItem = memo(({
   fields,
   fieldIndex,
   name,
@@ -38,7 +39,7 @@ const ArrayItem = ({
       </Col>
     </Row>
   );
-};
+}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
 
 ArrayItem.propTypes = {
   name: PropTypes.string,

packages/ant-component-mapper/src/tests/slider.test.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { Form as DDFForm } from '@data-driven-forms/react-form-renderer';
+import { Form as DDFForm, RendererContext } from '@data-driven-forms/react-form-renderer';
 import { mount } from 'enzyme';
 import { Slider as AntSlider, Form as OriginalForm } from 'antd';
 import Slider from '../slider';
 import FormGroup from '../form-group';
 
 const Form = (props) => (
   <OriginalForm>
-    <DDFForm onSubmit={jest.fn()} {...props} />
+    <RendererContext.Provider value={{ formOptions: { internalRegisterField: jest.fn(), internalUnRegisterField: jest.fn() } }}>
+      <DDFForm onSubmit={jest.fn()} {...props} />
+    </RendererContext.Provider>
   </OriginalForm>
 );
 

packages/blueprint-component-mapper/package.json

@@ -60,6 +60,7 @@
   "dependencies": {
     "@data-driven-forms/common": "*",
     "clsx": "^1.1.0",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react-jss": "^10.5.0"
   }

packages/blueprint-component-mapper/src/field-array/field-array.js

@@ -1,5 +1,6 @@
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 import clsx from 'clsx';
 import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer';
 import { createUseStyles } from 'react-jss';
@@ -19,7 +20,7 @@ const useStyles = createUseStyles({
   }
 });
 
-const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveButtonProps, disabledRemove }) => {
+const ArrayItem = memo(({ remove, fields, name, removeLabel, ArrayItemProps, RemoveButtonProps, disabledRemove }) => {
   const formOptions = useFormApi();
   const { remove: removeCss } = useStyles();
 
@@ -42,7 +43,7 @@ const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveBu
       </Button>
     </div>
   );
-};
+}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
 
 ArrayItem.propTypes = {
   remove: PropTypes.func,

packages/carbon-component-mapper/package.json

@@ -64,6 +64,7 @@
   "peerDependencies": {},
   "dependencies": {
     "@data-driven-forms/common": "*",
+    "lodash": "^4.17.21",
     "prop-types": ">=15.7.2",
     "react-jss": "^10.5.0"
   }

packages/carbon-component-mapper/src/field-array/field-array.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
 import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
 
@@ -30,7 +31,7 @@ const useStyles = createUseStyles({
   }
 });
 
-const ArrayItem = ({ remove, fields, name, removeText, buttonDisabled, RemoveButtonProps, ArrayItemProps }) => {
+const ArrayItem = memo(({ remove, fields, name, removeText, buttonDisabled, RemoveButtonProps, ArrayItemProps }) => {
   const formOptions = useFormApi();
   const { remove: removeStyle } = useStyles();
 
@@ -55,7 +56,7 @@ const ArrayItem = ({ remove, fields, name, removeText, buttonDisabled, RemoveBut
       </Button>
     </div>
   );
-};
+}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
 
 ArrayItem.propTypes = {
   remove: PropTypes.func,

packages/mui-component-mapper/package.json

@@ -70,6 +70,7 @@
     "@material-ui/pickers": "^3.2.10",
     "clsx": "^1.0.4",
     "date-fns": "^1.30.1",
+    "lodash": "^4.17.21",
     "moment": "^2.23.0",
     "@material-ui/lab": "^4.0.0-alpha.53"
   },

packages/mui-component-mapper/src/field-array/field-array.js

@@ -1,6 +1,7 @@
-import React, { useReducer } from 'react';
+import React, { memo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
+import isEqual from 'lodash/isEqual';
 
 import { Grid, Button, Typography, FormControl, FormHelperText, IconButton } from '@material-ui/core';
 
@@ -36,7 +37,7 @@ const useFielArrayStyles = makeStyles({
   }
 });
 
-const ArrayItem = ({
+const ArrayItem = memo(({
   fields,
   fieldIndex,
   name,
@@ -71,7 +72,7 @@ const ArrayItem = ({
       </Grid>
     </Grid>
   );
-};
+}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
 
 ArrayItem.propTypes = {
   name: PropTypes.string,

packages/pf4-component-mapper/package.json

@@ -66,7 +66,8 @@
   "dependencies": {
     "@data-driven-forms/common": "*",
     "prop-types": "^15.7.2",
-    "downshift": "^5.4.3"
+    "downshift": "^5.4.3",
+    "lodash": "^4.17.21"
   },
   "postpublish": "export RELEASE_DEMO=true"
 }

packages/pf4-component-mapper/src/field-array/field-array.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, memo } from 'react';
+import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
 
@@ -9,7 +10,7 @@ import { AddCircleOIcon, CloseIcon } from '@patternfly/react-icons';
 import './final-form-array.css';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
-const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems }) => {
+const ArrayItem = memo(({ fields, fieldIndex, name, remove, length, minItems }) => {
   const { renderForm } = useFormApi();
 
   const widths = {
@@ -60,7 +61,7 @@ const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems }) => {
       </Grid>
     </React.Fragment>
   );
-};
+}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
 
 ArrayItem.propTypes = {
   name: PropTypes.string,