Hyperapp: How to implement shouldComponentUpdate to increase Performance of complex components?

[rajaraodv]

In React, there is a lifecycle event called shouldComponentUpdate. It is called on every component and sub component before they get updated. If any of the component returns false, then the it kills re-rendering that component and all it's child components.

The idea is simple, if the app-developer knows that there is no need to diff vdom any further due to some business case, they can simply ask/force React to stop vdom diffing.

See:
https://facebook.github.io/react/docs/optimizing-performance.html#shouldcomponentupdate-in-action

https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc

In Hyperapp, there is only app-level lifecycle (and not component-level or sub-component-level) and every component are stateless. So how to achieve that? Please provide an example.

[andyrj]

just to keep links with this issue for reference, from slack.

https://addyosmani.com/blog/faster-javascript-memoization/

/* app.js - at top of patch */
if (oldNode === node) {
  return element
}

[rajaraodv]

Here is the Memoize React components article for stateless components.

[SkaterDad]

Relevant links for elm's implementation, Html.lazy. It's not keeping a cache of previously computed values, but in the v-dom diffing algorithm, they check that the function args are the same, and if so, return the existing node.

http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Lazy
https://github.com/elm-lang/virtual-dom/blob/master/src/Native/VirtualDom.js#L572-L585

[rajaraodv]

Thanks @SkaterDad. That means the end users dont have to worry about Memoizing on their end and it's out-of-the-box! #sweet!

[jorgebucaran]

@SkaterDad We would need to change h for this though. Is it really worth it? 🤔

I am leaning on no, but it would be nice to see if it's possible and what it looks like.

[SkaterDad]

@rajaraodv elm doesn't apply that optimization by default. You have to specifically wrap your function in Html.lazy. It's not really memoization since there's no cache, but just skips reproducing the DOM nodes if the model passed to the view function was the same last time it rendered.

@JorgeBucaran I agree it's probably not practical (or even desired) to match what elm does. The architecture and language definitely simplify things! Maybe hyperapp could let users define which properties to check to consider a node unchanged?

More food for thought, this time from Evan You of Vue.js, on the subject of memoizing functional components. https://github.com/vuejs/vue/issues/4037#issuecomment-258164999

[jorgebucaran]

@SkaterDad Hyperapp is limited to functional components only, so wouldn't it make sense to enable this optimization by default?

[jorgebucaran]

Instead of providing any memoization features out-of-the-box, I think I'll just push everything to userland (letting you decide what you want to do) and simply add an early return when oldNode === node.

[rajaraodv]

@JorgeBucaran Yeah, I think if Hyperapp at least has that capability and if there is an example of how to use that, we should be good!

[okwolf]

Recompose has a performance optimization HOC for React that lets you pick which props to compare when deciding if an update is needed.

[jorgebucaran]

I think this is now solved by #378.

[jorgebucaran]

@rajaraodv What do we need to close here?

[rajaraodv]

Sweet! thank you!