HTML Tag low performance React

hello, I use react three fiber / draw and when I add 5 tags to the scene, fps drops from 60 to 20 on iPhone Safari, unfortunately I haven’t tested it on other devices. In this case, everything is fine on the PC. The content of the tags contains literally 6 lines of text, and when I remove one of the lines or even one of several tags, the performance improves. Does the HTML tag really have such an impact on performance and is there any optimization solution

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.