Spread operator vs JSON.parse(JSON.stringify(...)) for immutable objects

Question

I'm working with Redux and recently ran into a problem where I was adding messages to an array and the Redux state was not issueing a re-render on React. I'm using the react-redux library for this. Here's an example of the problem I was having:

// State structure
structure: { messages: {}, groups: {} }

// ---
newState = { ...prevState };
newState.messages[action.message.group] = action.message;
return newState;

This was updating the state however it wasn't triggering an update to the react component, however replacing newState = { ...prevState } with newState = JSON.parse(JSON.stringify(prevState)) resolved the issue.

Could anyone explain why this is happening in detail? I was under the impression that the spread operator created a clone of the object and I've never had any problems with it until now.

I think you should use this "Object.assign". without directly replace origin value, because we don't mutate the state in generally. (redux.js.org/docs/basics/Reducers.html) — Wei
– Wei, Commented Apr 20, 2017 at 2:30
The spread operator is only a shallow copy, not a deep copy like your serialize/deserialize approach. That could affect things. — ShadowRanger
– ShadowRanger, Commented Apr 20, 2017 at 2:45

chris · Accepted Answer · 2020-08-19 00:00:30Z

9

react-redux connected components do a shallow strict equality check to decide if they want to update. see http://redux.js.org/docs/faq/ImmutableData.html

The spread operator is like Object.assign and does not deeply clone an object. The reason the JSON thing worked is because you created a whole new object which would pass the strict equality check, however all your components would update needlessly because nothing will pass a strict equality check now.

Object.assign({}, ...prevState, ...newState) would create a new top-level object, but it would not create a new object for any objects nested in prevState or newState. However, you would have to carefully update nested objects so as to avoid needless re-renders. This can get tricky for deeply nested objects and arrays.

I'd recommend checking out the seamless-immutable or immutable packages for managing state. Also, the reselect library can help you extract memoized objects specific to your component's needs.

UPDATE 08/16/2020

the immer library is one of the best state management libraries as of today

edited Aug 19, 2020 at 0:00

answered Apr 20, 2017 at 2:34

chris

6,8436 gold badges43 silver badges54 bronze badges

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

2 Comments

Hobbyist Over a year ago

This is the only location where the problem occurs and it feels overkill to include a library on an application that we've been using redux in for several months. We were changing out data structures around while migrating to a MBaaS and ran into this problem, what do you feel would be the best course of action knowing that this is the only use-case? Do you feel that importing a library is necessary, or should serializing/deserializing work fine for this? I have a custom componentShouldUpdate that blocks unecessary renders based on a cache, so that shouldn't be a problem.

chris Over a year ago

I'd say if the app is working and you aren't currently having any performance problems a full re-render doesn't seem like a concern at the moment. Switching to seamless-immutable later is very easy.

Shubham · Accepted Answer · 2023-06-22 16:37:01Z

0

The spread operator is commonly used to make deep copies of JS objects. When we have nested arrays or nested data in an object, the spread operator makes a deep copy of top-level data and a shallow copy of the nested data. While JSON.parse(JSON.stringify(obj)) will do a deep copy of nested data also.

answered Jun 22, 2023 at 16:37

Shubham

1

Collectives™ on Stack Overflow

Spread operator vs JSON.parse(JSON.stringify(...)) for immutable objects

2 Answers 2

UPDATE 08/16/2020

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE 08/16/2020

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related