Comment by spion | Hacker News Reader

Comment by spion | Hacker News Reader

Parent Full thread

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

In 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.

Or 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.

To 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.

Reply on news.ycombinator.com