HTML Tag low performance React

a tag is a new react root, literally it calls REACTDOM.createRoot(domNode).render(…). it can be bad if that root is now carrying out stuff all the time bc then you have 7 react competing: one for the dom, one for three, 5 for dreis html. a react root by itself doesn’t take performance, it does nothing if it isn’t active, so unless you have loops in there that setState stuff it is nothing to worry about.

drei will also carry out calculations to place the html correctly with css3d, that also shouldn’t be the bottle neck.

what can be heavy is occlusion. <Html> either uses raycast or blending. raycast is the traditional method and it is very expensive as it has to raycast the whole scene to figure out if something is in front, whereas blending is almost for free.

if you use raycast, solutions could be either switching to blending or drei/<Bvh>

a sandbox would be nice btw, i’m just guessing at this point.