"pure" components

I'm not sure how much of this is within morphdom, hyperx or bel.

How do these modules handle multiple updates to a large dom heirarchy when very little changes? Does morphdom do any simple === comparisons of nodes? If so can we make rendering more efficient by memoizing returned values? e.g. experimenting with yo-yo so far I am writing quite a lot of:

function MyComponent(props) {
  return yo`<div>${props.name}</div>`
}

And all this is composed into a complete page. If yo/bel/hyperx could memoize the returned values for each input of strings and values, then morphdom could do a simple === and save time maybe?

Maybe this is happening already? One potential case is animations - I want to yo.update() the entire page 60 times a second with new values being passed down through the render heirarchy. Most pieces/components of the page don't actually use values, but my understanding is that currently each time a new DOM element would be built, and morphdom would do a deep compare?

Would this be a significant saving? I'm thinking how to reduce both the cost of unnecessary calls of bel.createElement and unnecessary diff calculations.

Start by reading the issue's referenced yo.update(), bel.createElement, morphdom, hyperx, and bel behavior, then compare how repeated updates traverse unchanged components. The issue does not name files or tests; done would require a decided scope and evidence that memoizing returned values or skipping unchanged work improves the stated update path.