4 ms·
Sure you would need to do go one level deeper if the top level is different, but you can still use pointer equality at the lower levels immutableEq(a1, a2) {
by spion 11y ago
Sure you would need to do go one level deeper if the top level is different, but you can still use pointer equality at the lower levels
immutableEq(a1, a2) {
return (a1 === a2) || all(mapPair(a1, a2, immutableEq))
}
Now if you update the value of a single element in the array a2, you would not have to check all the elements in depth (only their references):
a1 = Immutable.List(el1, el2, el3, el4, el5)
a2 = a1.set(2, Immutable.Map({hello: "world"}));
immutableEq(a1, a2) // all but el3 compared by reference equality
- albertoleal 11y agoTo generalize. If a change occurred at a [hot] path of a [deeply nested] map, then only [React] components that depend on the data at any subpath would perform the dirty check (i.e. executing shouldComponentUpdate) to re-render the component.
- skybrian 11y agoIn your example you're just changing one element and leaving the rest the same - a pretty trivial transformation. If you're applying map() to a list then all of the elements change. If you have a pipeline then it's going to result in everything downstream re-running, unless you compare the output of the map() transformation to the previous value, like some build systems do.
- spion 11y agoOr alternatively, run all the major data transformations necessary to get from data to VDOM from the render function, passing as much as possible of the original data to the bottom-most components.