What are the difference between the React codes below? Which one is most efficient or effective? Or are they practically the same?

user_11701866 0
Viewed 57

I'm currently with a project and came up with two different set of codes and was wondering if there is a/are difference between the two.

ReactJS (latest version)

1.

columns.map(v => v.aggregate = (values) => values[0]);

2.

columns = columns.map( v => ({ 
            ...v,
            aggregate : (values) => values[0]
        }))

Expected result:

const columns = [
    {
        Header: 'ID',
        accessor: 'empid',
        shown: true,
        width: 130
    }, {
        Header: 'Name',
        accessor: 'name',
        shown: true,
        aggregate: (values) => values[0],
        width: 130
    }, {
        Header: 'Age',
        accessor: 'age',
        shown: true,
        aggregate: (values) => values[0],
    }, {
        Header: 'Email',
        accessor: 'email',
        shown: true,
        aggregate: (values) => values[0],
        width: 150
    },  {
        Header: 'Birthday',
        accessor: 'birthday',
        shown: true,
        aggregate: (values) => values[0],
        width: 150
    }
];

I will add this to ReactTable component with aggregation pivot by id.

reactjs ecmascript-6 object arrays javascript
1 Answers

In the first example, you're directly mutating each object. In the second example, you are using the spread operator first, so you're shallowly copying each object first instead of directly mutating it.

user_102217650
Related