Skip to content

Commit 50e47d6

Browse files
Hyperkid123Hyperkid123
committed
fix(all): memoize ArrayItem in field array
1 parent 4fa3cd5 commit 50e47d6

File tree

15 files changed

+41
-22
lines changed

15 files changed

+41
-22
lines changed

‎packages/ant-component-mapper/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
"react-dom": ">=16.13.0"
7070
},
7171
"dependencies": {
72-
"@data-driven-forms/common": "*"
72+
"@data-driven-forms/common": "*",
73+
"lodash": "^4.17.21"
7374
},
7475
"postpublish": "export RELEASE_DEMO=true"
7576
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { useReducer } from 'react';
1+
import React, { memo, useReducer } from 'react';
2+
import isEqual from 'lodash/isEqual';
23
import PropTypes from 'prop-types';
34
import { useFieldApi, useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
45
import { Row, Col, Button, Typography, Space } from 'antd';
56
import { UndoOutlined, RedoOutlined } from '@ant-design/icons';
67

78
import FormGroup from '../form-group';
89

9-
const ArrayItem = ({
10+
const ArrayItem = memo(({
1011
fields,
1112
fieldIndex,
1213
name,
@@ -38,7 +39,7 @@ const ArrayItem = ({
3839
</Col>
3940
</Row>
4041
);
41-
};
42+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
4243

4344
ArrayItem.propTypes = {
4445
name: PropTypes.string,

‎packages/blueprint-component-mapper/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"dependencies": {
6161
"@data-driven-forms/common": "*",
6262
"clsx": "^1.1.0",
63+
"lodash": "^4.17.21",
6364
"prop-types": "^15.7.2",
6465
"react-jss": "^10.5.0"
6566
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useContext } from 'react';
1+
import React, { memo, useContext } from 'react';
22
import PropTypes from 'prop-types';
3+
import isEqual from 'lodash/isEqual';
34
import clsx from 'clsx';
45
import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer';
56
import { createUseStyles } from 'react-jss';
@@ -19,7 +20,7 @@ const useStyles = createUseStyles({
1920
}
2021
});
2122

22-
const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveButtonProps, disabledRemove }) => {
23+
const ArrayItem = memo(({ remove, fields, name, removeLabel, ArrayItemProps, RemoveButtonProps, disabledRemove }) => {
2324
const formOptions = useFormApi();
2425
const { remove: removeCss } = useStyles();
2526

@@ -42,7 +43,7 @@ const ArrayItem = ({ remove, fields, name, removeLabel, ArrayItemProps, RemoveBu
4243
</Button>
4344
</div>
4445
);
45-
};
46+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
4647

4748
ArrayItem.propTypes = {
4849
remove: PropTypes.func,

‎packages/carbon-component-mapper/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"peerDependencies": {},
6565
"dependencies": {
6666
"@data-driven-forms/common": "*",
67+
"lodash": "^4.17.21",
6768
"prop-types": ">=15.7.2",
6869
"react-jss": "^10.5.0"
6970
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react';
1+
import React, { memo } from 'react';
22
import PropTypes from 'prop-types';
3+
import isEqual from 'lodash/isEqual';
34
import clsx from 'clsx';
45
import { createUseStyles } from 'react-jss';
56

@@ -30,7 +31,7 @@ const useStyles = createUseStyles({
3031
}
3132
});
3233

33-
const ArrayItem = ({ remove, fields, name, removeText, buttonDisabled, RemoveButtonProps, ArrayItemProps }) => {
34+
const ArrayItem = memo(({ remove, fields, name, removeText, buttonDisabled, RemoveButtonProps, ArrayItemProps }) => {
3435
const formOptions = useFormApi();
3536
const { remove: removeStyle } = useStyles();
3637

@@ -55,7 +56,7 @@ const ArrayItem = ({ remove, fields, name, removeText, buttonDisabled, RemoveBut
5556
</Button>
5657
</div>
5758
);
58-
};
59+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
5960

6061
ArrayItem.propTypes = {
6162
remove: PropTypes.func,

‎packages/mui-component-mapper/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"@material-ui/pickers": "^3.2.10",
7171
"clsx": "^1.0.4",
7272
"date-fns": "^1.30.1",
73+
"lodash": "^4.17.21",
7374
"moment": "^2.23.0",
7475
"@material-ui/lab": "^4.0.0-alpha.53"
7576
},

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { useReducer } from 'react';
1+
import React, { memo, useReducer } from 'react';
22
import PropTypes from 'prop-types';
33
import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
4+
import isEqual from 'lodash/isEqual';
45

56
import { Grid, Button, Typography, FormControl, FormHelperText, IconButton } from '@material-ui/core';
67

@@ -36,7 +37,7 @@ const useFielArrayStyles = makeStyles({
3637
}
3738
});
3839

39-
const ArrayItem = ({
40+
const ArrayItem = memo(({
4041
fields,
4142
fieldIndex,
4243
name,
@@ -71,7 +72,7 @@ const ArrayItem = ({
7172
</Grid>
7273
</Grid>
7374
);
74-
};
75+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
7576

7677
ArrayItem.propTypes = {
7778
name: PropTypes.string,

‎packages/pf4-component-mapper/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@
6666
"dependencies": {
6767
"@data-driven-forms/common": "*",
6868
"prop-types": "^15.7.2",
69-
"downshift": "^5.4.3"
69+
"downshift": "^5.4.3",
70+
"lodash": "^4.17.21"
7071
},
7172
"postpublish": "export RELEASE_DEMO=true"
7273
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { Fragment } from 'react';
1+
import React, { Fragment, memo } from 'react';
2+
import isEqual from 'lodash/isEqual';
23
import PropTypes from 'prop-types';
34
import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
45

@@ -9,7 +10,7 @@ import { AddCircleOIcon, CloseIcon } from '@patternfly/react-icons';
910
import './final-form-array.css';
1011
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
1112

12-
const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems }) => {
13+
const ArrayItem = memo(({ fields, fieldIndex, name, remove, length, minItems }) => {
1314
const { renderForm } = useFormApi();
1415

1516
const widths = {
@@ -60,7 +61,7 @@ const ArrayItem = ({ fields, fieldIndex, name, remove, length, minItems }) => {
6061
</Grid>
6162
</React.Fragment>
6263
);
63-
};
64+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
6465

6566
ArrayItem.propTypes = {
6667
name: PropTypes.string,

‎packages/suir-component-mapper/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@data-driven-forms/common": "*",
6464
"classnames": "^2.2.6",
6565
"clsx": "^1.0.4",
66+
"lodash": "^4.17.21",
6667
"prop-types": "^15.7.2",
6768
"react-jss": "^10.1.1"
6869
}

‎packages/suir-component-mapper/src/field-array/field-array.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useReducer } from 'react';
1+
import React, { memo, useReducer } from 'react';
22
import PropTypes from 'prop-types';
3+
import isEqual from 'lodash/isEqual';
34
import { useFormApi, FieldArray } from '@data-driven-forms/react-form-renderer';
45

56
import { Button, Header, ButtonGroup } from 'semantic-ui-react';
@@ -37,7 +38,7 @@ const useStyles = createUseStyles({
3738
}
3839
});
3940

40-
const ArrayItem = ({
41+
const ArrayItem = memo(({
4142
fields,
4243
fieldIndex,
4344
name,
@@ -74,7 +75,7 @@ const ArrayItem = ({
7475
</div>
7576
</div>
7677
);
77-
};
78+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
7879

7980
ArrayItem.propTypes = {
8081
name: PropTypes.string,

‎templates/component-mapper/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
},
5959
"dependencies": {
6060
"@data-driven-forms/common": "*",
61+
"lodash": "latest",
6162
"prop-types": "^15.7.2"
6263
}
6364
}

‎templates/component-mapper/src/field-array/field-array.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2+
import isEqual from 'lodash/isEqual';
23
import PropTypes from 'prop-types';
34
import { useFieldApi, useFormApi, FieldArray as FieldArrayFF } from '@data-driven-forms/react-form-renderer';
45

5-
const ArrayItem = ({ remove, fields, name }) => {
6+
const ArrayItem = memo(({ remove, fields, name }) => {
67
const formOptions = useFormApi();
78

89
const editedFields = fields.map((field) => ({
@@ -16,7 +17,7 @@ const ArrayItem = ({ remove, fields, name }) => {
1617
<button onClick={remove}>Remove</button>
1718
</div>
1819
);
19-
};
20+
}, ({remove: _prevRemove, ...prev}, {remove: _nextRemove, ...next}) => isEqual(prev, next));
2021

2122
ArrayItem.propTypes = {
2223
remove: PropTypes.func,

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13376,6 +13376,11 @@ lodash@^4.17.19, lodash@^4.17.20:
1337613376
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
1337713377
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
1337813378

13379+
lodash@^4.17.21:
13380+
version "4.17.21"
13381+
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
13382+
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
13383+
1337913384
log-symbols@^2.1.0, log-symbols@^2.2.0:
1338013385
version "2.2.0"
1338113386
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"

0 commit comments

Comments
 (0)