In react/redux, calling map() on a store prop edits the prop in the store itself

Question

I have a component connected to the Redux store that receives a prop and passes it to a child component.

In the child component I elaborate this prop in the render() method, in this way

let dataForFlatList = [].concat.apply([], [].concat.apply([], this.props.internalData.map( a => {
   if(a.hasOwnProperty("components")){ 
      a.components[a.components.length-1].lastItem = true
   } else {
      a.dayData.lastItem = true
   } 
   return Object.values(a)
})));

For clarity, this prop in the Redux store has this structure:

[
   {
      dailyData: {
         date: .....
         steps: .....
      },
      components: [ {...}, {...}, {...}, {...}, {...} ...]
   },
   {
      dailyData: {
         date: .....
         steps: .....
      },
      components: [ {...}, {...}, {...}, {...}, {...} ...]
   },
   {
      dailyData: {
         date: .....
         steps: .....
      }
   }
   :::
]

so, what I want to do is adding a property lastItem to the last object in the components array; or, if components does not exist, adding lastItem to the object dailyData . Finally, that series of concat() are just necessary to obtain a single array of no nested objects.

This code works, but the strange fact here is that when i call the map() function on this.props.internalData the prop internalData inside the store is edited, too.

Can you help to understand why it happens?

Thanks

Answer 1

Javascript passes objects by reference. This means that if you clone the object (so called "shallow clone") you actually change the main object reference, but nested properties stay the same. That's exactly what happens when you map the array of objects or call Object.assign({}, /.../) ;

Hence, when you change sth like a.dayData.lastItem = true you actually mutate original property. Map will return cloned object, but this specific assignment changes the value of reference of the original property.

In order to solve it, you have multiple approaches:

1. Clone whole object and each properties (deep clone)
2. Don't mutate the property and just pass a new value (construct new object on each map iteration);

Also, get rid of these multiple [].concat.apply , they're probably unneeded :)

Solutions:

1. You can try using _.cloneDeep : https://lodash.com/docs/4.17.10#cloneDeep :

// Inside your map
const clonedA = _.cloneDeep(a);

if(clonedA.hasOwnProperty("components")){ 
   clonedA.components[clonedA.components.length-1].lastItem = true
} else {
   clonedA.dayData.lastItem = true
} 

return clonedA;

Be warned, though! It might be very slow for big objects (it has to traverse all the structures).

2. You can try passing new value like that:

if(a.hasOwnProperty("components")){ 
   // We use empty slice to clone the array
   const clonedComponents = components.slice();
   const lastArrayElement = clonedComponents[clonedComponents.length-1];
   clonedComponents[clonedComponents.length - 1] = Object.assign({}, lastArrayElement, { lastItem: true });

   return Object.assign({}, a, { components: clonedComponents});
} else {
   // Note empty object as the first param - we also return completely new value
   return Object.assign({}, a, { dayData: { lastItem: true } });
} 
return Object.values(a);

When mapping objects, I still prefer to use _.cloneDeep or _.merge when I know the state of the object (don't forget to call Object.assign with {} as the first argument!) if I know it won't have a significant impact for the performance.

In your case, I'd suggest following my second suggestion - just create new object on every level of your data structure. I'd also recommend moving these operations to helpers, as you can see the code gets quite complicated and somewhat ugly.