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 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
merge in the snippets above would be use of immutability helper — it changes only parts of the state which needs to be changed.