Static VNodes

Have a look at this line in the Hyperapp source.

 function patch(parent, element, oldNode, node, isSVG, nextSibling) {
    if (node === oldNode) {
    } else if (oldNode == null) {
    ...

This means, that if the patchfunction ever encounters a node (a virtual node) which is exactly equal, i e the same instance as the corresponding old node, it will skip over it, and all children. The patch function will not even drill down to make sure to see if anything further down has changed.

So imagine you have a component like this:

export const GameCommentBox = props => <div class="game-comment">
    <div class="game-comment-fancy-heading">
        {props.player === 1 ? "Player One"  : "Player Two"}
    </div>
    <div class="game-comment-move">{props.move}</div>
    <div class="game-comment-fancy-footer"></div>
</div>

Especially if there are many such components in a list (as one can imagine for the example above), you can spare the rendering a lot of effort by defining the static parts as constants:

const Heading = player => <div class="game-comment-fancy-heading">{player}</div>
const P1HEADING = Heading('Player One')
const P2HEADING = Heading('Player Two')
const FOOTER = <div class="game-comment-fancy-footer"></div>

export const GameCommentBox = props => <div class="game-comment">
    {props.player === 1 ? P1HEADING : P2HEADING}
    <div class="game-comment-move">{props.move}</div>
    {FOOTER}
</div>

This saves the patch function from delving into the heading and footer for every "game comment" because each time it will be not only the same shape but the very same instance of vnode. The concept can be extended to memoization of components, but that's a topic for another time.