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.

trincot · Accepted Answer · 2021-08-26 13:05:43Z

2

Your parseData function currently returns the same array object, in which the objects were mutated. If you want your objects to be immutable, you should not have code like x.date =. Instead do this:

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

answered Aug 26, 2021 at 13:05

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M1CH3L1US · Accepted Answer · 2021-08-26 11:33:37Z

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. ;)

answered Aug 26, 2021 at 11:33

M1CH3L1US

1381 silver badge7 bronze badges

1 Comment

trincot Over a year ago

There is no need for [...resp] when you already do .map.

John · Accepted Answer · 2021-08-26 11:28:17Z

1

I don't believe Object.freeze(resp); will freeze nested objects. You could try the following, but I believe it is confusing to read.

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

Alternatively, you could change your parseData function to return a copy using the spread operator:

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

answered Aug 26, 2021 at 11:28

John

1,2949 silver badges13 bronze badges

Comments

Tomalak · Accepted Answer · 2021-08-26 11:39:06Z

Object.freeze will freeze the direct properties of the object you pass. It will not do this recursively, so giving it an array or nested object will not do what you expect.

The parseData function affected not only var2 but also var1.

No. Here, var1 === var2 because your parseData code does not modify the object at all, but only a single property of it. It's the same object instance all-along. When you set x.date = new Date(x.date), the x itself does not change.

Not sure if that's going to be necessary, but you could freeze each individual object in resp, using map().

const freezeAll = items => items.map(item => Object.freeze(item));
const parseData = items => items.forEach(item => item.date = new Date(item.date));

// fetch data, process, and cache it
const data = fetchData().then(parseData).then(freezeAll);

// use data
useEffect(() => {
  data.then(items => {
    props.setAction1(items[0]);
    props.setAction2(items[0]);
  });
}, []);

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related