How to make a promise object immutable when setting different states in Javascript?

Question

I'm working with React/Redux and want to use the same Promise result to set two different states. Here's my code:

  useEffect(() => {
    fetchData().then((resp) => {
      Object.freeze(resp);
      const var1 = resp[0];
      const var2 = parseData(resp[0]);
      props.setAction1(var1);
      props.setAction2(var2);
    });
  }, []);

The content of resp is an array of dicts:

Array [ (95) […] ]

0: Array(95) [ {…}, {…}, {…}, … ]
​
0: Object { date: "6/1/11", open: 21.45673929 }
​​
1: Object { date: "6/2/11", open: 21.02743338 }
​​
2: Object { date: "6/3/11", open: 20.64964196 }
​​
etc...

I know that in Javascript object are mutable, so I attempted to make resp immutable with Object.freeze(resp). var1 should be the result with string dates and var2 should be the result with date converted to Date objects with the parseData function, whose content is:

function parseData(data) {
  data.map((x) => (x.date = new Date(x.date)));
  return data;
}

My problem is that, when I run this function, var1 === var2. The parseData function affected not only var2 but also var1. I don't understand how this happens, especially as I froze the resp object. This is likely an issue with immutability, but I'm unsure where else to go.

Answer 1

I don't think Object.freeze is what you're looking for. In the end, the objects still reference the same location in memory, even if they are frozen. You should make a copy of the data to separate the two so you can alter either of them without affecting the other one.

fetchData().then((resp) => {
  const ref1 = resp;
  /* Alternatively you can also use `Object.assign` */
  const ref2 = [ ...resp ].map(obj => ({ ...obj }));
}

Like @JohnD mentioned, you can also do that in your parseData function which might be a little tidier. ;)