JS spread syntax doesn't work for nested properties...
JS spread syntax copies only the first level properties, and passes reference to any nested properties. Here's an example:
const original = {
value: 'value',
nested: {
value: 'nestedValue',
},
};
console.log(original);
// Output: { value: 'value', nested: { value: 'nestedValue' } }
const copy = { ...original };
copy.value = 'modified';
copy.nested.value = 'modified';
console.log(original);
// Output: { value: 'value', nested: { value: 'modified' } }
console.log(copy);
// Output: { value: 'modified', nested: { value: 'modified' } }
As you can see, changing a nested value of our copy
object also modifies the original object. I fixed this by using Lodash cloneDeep, but I'm sure there are other ways as well.