3 ms·
Maybe this is either an uncommon use case or I'm missing an easy way to do it, but when you have a component tree like A->B->C (-> denoting child relation) and
by mden 8y ago
Maybe this is either an uncommon use case or I'm missing an easy way to do it, but when you have a component tree like A->B->C (-> denoting child relation) and A contains most of the state and B contains many (say > 1k) children, and you keep updating state in A which only affects one or a few of C, the diffing process as I understand will check all of C whether they need to be rerendered. So if you update the state super frequently, let's say on mouse movement, you are doing at least O(C) checks just to update one or so C components.
So maybe you can pass forward refs from A to all the C's and then bypass B in the cases you want to directly trigger rerender on the individual affected C components. Is that the way to handle this scenario?
It's pretty late so the above maybe doesn't make sense, but to try to summarize, having a solution for updating deeply nested children without diffing all of the related components to see if they need rerender.
- baddox 8y agoForgive me if I misunderstand the problem, but is it not sufficient to implement a fast shouldComponentUpdate on C, ideally making C a pure component? The render pass will still do a check for every C whenever B updates, but I would think that strict equality checks would usually be fast enough even for thousands of components every animation frame. If that’s not fast enough, perhaps it would be faster to directly subscribe each instance of C to its state updates with something like Redux’ connect HOC. I assume that React does something like marking branches of the component tree as dirty and only doing a render pass on the dirty sections, but I could be wrong. If I’m correct, that would give you direct rerenders of the individual deeply nested C instances without rerendering A or B or unchanged C components at all.
- mden 8y agoThank you and @hfourm, I will try out the redux solutions proposed.
- hfourm 8y agoIf you are in the Redux world I would maybe take a look at Reselect (https://github.com/reduxjs/reselect https://github.com/reduxjs/reselect). As the other comment said, your problem should be solved by shouldComponentUpdate or more granular coupling of state to the component (or a combination).