Halogen component VDOM re-rendering boundaries

chexxor · December 14, 2018, 2:21pm

hyperisco [10:12 AM]
I was also thinking… every state change requires a full VDOM diff doesn’t it?
because you have to go all the way to the leaves to see if anything changed
so if I have 1000 nodes and I want to change the text of a label, I have to diff 1000 nodes
though maybe the VDOM has some way of hashing nodes, so every node stores a hash of itself
then you just have to compare hashes

monoidmusician [10:17 AM]
in Halogen, components define boundaries for that sort of thing (state updates and DOM diffing); I also think there’s a way to thunk nodes too, I don’t know the details
maybe components use thunks

hyperisco [10:38 AM]
When you think you’re doing great and then you realise bind and discard are not imported…

natefaubion [10:40 AM]
You can thunk arbitrary nodes in master based on a provided equality predicate. (edited)

hyperisco [10:44 AM]
so… where can I get details on that
(also: I’m not the only one having that revelation with the Atom plugin, am I?)

natefaubion [11:03 AM]

github.com

slamdata/purescript-halogen/blob/master/src/Halogen/HTML.purs#L75-L87


-- | Optimizes rendering of a subtree given an equality predicate. If an argument
-- | is deemed equivalent to the previous value, rendering and diffing will be
-- | skipped. You should not use this function fully saturated, but instead
-- | partially apply it for use within a Component's scope. For example, to skip
-- | rendering for equal states, just wrap your `render` function.
-- |
-- | ```purescript
-- | myComponent = component
-- |  { render: memoized eq render
-- |  , ...
-- |  }
-- | ```
memoized

It needs some documentation

hyperisco [11:09 AM]
is any of this done by default?

natefaubion [11:10 AM]
Components are always thunked based on a dirty flag
or rather, they are rendered when you set state
otherwise they are not rendered
So if a parent renders, child component nodes are just moved as needed. They are not rendered.
Semantics-wise, setting state is “synchronous” in that your component is guaranteed to have rendered after set yields. Otherwise it is never rendered.

hyperisco [11:12 AM]
right, child components, but I am just talking about nodes

natefaubion [11:12 AM]
No, it does not do any thunking automatically for arbitrary nodes

hyperisco [11:13 AM]
okay, but you’re saying that is possible with memoized?

natefaubion [11:13 AM]
Yes, memoized lets you conditionally diff and render based on an equality predicate.

hyperisco [11:13 AM]
okay cool, thanks

natefaubion [11:14 AM]
so you would lift out the subtree into your component’s scope (not render scope)

foo = component { ... }
  where
  myThunkedSubtree = memoized eq \a -> H.div ...