Deep-cloning of Redux state

Evgeny Timoshenko
Mar 26, 2017 · 1 min read

I found myself making the same mistake while implementing Redux applications. That simple mistake may take different forms however causes the same bad consequences: performance downgrade and excessive re-rendering.

There was a need of updating a deeply nested slice of the state with a given set of properties. First thoughtless idea was to do it as following:

Which is awful. The problem with code above is that _.merge creates a deep copy of the slice, which will result in updating of every component expecting slice changes. Even if we want to just add a single property into our slice, the slice and its children would be cloned.

Another nasty example:

The example above even worse, because it triggers re-render of everything and execution of all store watchers if you use some.

A great replacement for lodash deepClone and merge in the snippets above would be use of immutability helper — it changes only parts of the state which needs to be changed.

More From Medium

Also tagged JavaScript

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade