.setState() Not Working? Shallow Copy vs Deep Copy & Lodash

There are times in React and Redux when you are trying to update the state and it just doesn’t work. Maybe it has already been working in other cases. You start to question your sanity as you go through […theSpreadOperator], Object.assign(), and any other copying methods you can find on the internet. Unfortunately, the issue isn’t your copying method, it’s your copying type — you likely need a deep copy instead of a shallow copy.

Examples here are specific to React and Redux, but understanding shallow and deep copies is valuable computer science knowledge, and Lodash can be used with any JavaScript project.

Shallow vs Deep Copies

As the picture above shows, a shallow copy (or “clone”) only references the objects inside the original object, but a deep clone makes clones of the inside objects, too. In other words, a shallow clone only copies the top level of the object. Let’s compare that to real-life examples.

Shallow Copy

Let’s say you just get your own Netflix account for the first time, so you have no liked shows or movies. You ask your best friend for recommendations and you like every Netflix program on your friend’s list. (This is much more work than making a shallow clone, so ignore that part.) Now you and your friend have the same “My List” on Netflix.

You made a clone of your friend’s list. They are separate, and you can both add or remove shows from your list without influencing the other person’s list. However, they are shallow because they reference the same objects — that is, if Netflix changes something on that list for whatever reason, that object will also be changed on your list and your friend’s list. You did not make your own copies of the movies and shows.

Deep Copy

On the other hand, most examples outside of tech are deep copies. If you make a copy of a family recipe, you can add ingredients and delete ingredients just like you can with a shallow copy above, but you can also change pre-existing ingredients without affecting the other copies of the recipe. If I decide my carrot cake needs fewer raisins than my mom’s, changing the amount of raisins on my recipe will not change the amount on my mom’s copy of it. This is a deep copy.

Summary

A shallow copy contains references and a deep copy contains its own copies of those references.

Why It’s Important

In React and Redux, your app is only updated when a change in state is detected through .setState() or the reducer, respectively. A shallow copy could change the state before either of these are called, so when they are called, the old state would appear equal to the new state, and your elements would not be updated.

That’s why (as you may have noticed), when you’re having trouble updating the state, using console.log() just before the state should be updated shows that the state has already changed to your desired update. But because this took place at the wrong time, React and Redux don’t notice it and you don’t see the results on the page.

The Fix — Lodash

Lodash comes with React, but if it is not in your package-lock.json, you can add it easily with NPM.

npm i -g npm

npm i --save lodash

If this doesn’t work, try Lodash.com or search the internet. Next, define

var _ = require('lodash');

In my class components, I had to define this outside of the class. Yes, the variable name is “_.” Get it? Lodash? It’s a low dash!

Lastly, wherever you need a deep clone, simply use

_.cloneDeep(theObjectThatNeedsCloningHere)

Conclusion

Play around with that function and get a feel for how it works. Keep paying attention to how objects inside objects respond in both deep and shallow copies. Overall, this method has helped me write successful code quicker and made my code easier to read.

Happy coding!