Ignore functions from diffs?

[togakangaroo]

This is more of a question.

I noticed recently that in my virtual-dom app I never have zero diffs. This is because I attach callbacks to some elements

h('.message', {
  onclick: () => showMessage(m)
}, [m.text])

I'm honestly not sure what the correct thing to do here is. I understand why there's a diff - there's a new closure each time, but it also seems like when the actual contents of the closure don't change there shouldn't be a diff.

What is the recommended way of handling this situation? Only set up listeners on the document and listen for bubbling events? What about events (like mouseenter) that don't bubble? What about data that needs to be handled?

[chrisinajar]

if m is dynamic then you'd actually want it to be replaced each time since it'll point to bad values of m otherwise.

If it's not dynamic then define the function statically outside of render and reference it directly.

As for event bubbling, this depends really really heavily on which ecosystem you're in. virtual-dom itself has no opinion on this since it is strictly a dom diffing library. I highly recommend jumping on the mercury bandwaggon and reading up on dom-delegator / value-event.

Hope this helps!