Q: Meaning of highlight colors (green / orange)?

[rejhgadellaa]

I'm wondering what the meaning of the highlight colors is when I have Highlight updates enabled. I'm seeing green/blue-ish and orange/yellow-ish outlines.

I would assume the difference is a component that (only) re-renders and one that is actually updated in the DOM?

[marvinhagemeister]

The difference in color represents the frequency at which the components where updated. The more often a component was updated in a short amount of time, the more orange or reddish the highlight will appear.

[rejhgadellaa]

Thanks for the quick reply!

I'm still a bit new to Preact and the VDOM. If I understand correctly, 'updated' means it's re-rendered (as in render() is called) but then Preact checks if there are any diffs between the resulting VDOM (sub)tree and only applies actual changes if there are any?

Is there a way to see/debug renders that do (and which do not) cause the DOM to update?

(I'm trying to optimize re-renders VS dom updates, that's why I'm asking :))

Thanks again!