I have this conceptual problem and I have a really simple and minimal codesandbox for it:

I want to keep a count of the components that are rendered in my page (per component). These are my components. (I'm working with Preact but we're really talking about functions here)

function Element() {
  return " " //I'm not important
}
function Container() {
    //container is repeating my Element
    return <div>
            <Element />
            <Element />
            <Element />
            <Element />
           </div>   
}

I keep the count of Element and Container in the page with an High Order Function that keeps track of the count by adding a property to the component only if it's the first one (firstType = true).

I wanna do this because this type of component needs to render differently the first time. (< defs> for svg)

I can do that easily with this High Order Function

function Counter(Component) {
  let count = 0;
  return function (...props) {
   //this is for the purpose of the debugging
    return <>{++count} <Component {...props[0]} /> </>
  }
}

The problem occured when in another HOC I tried to render the component with renderToStaticString(),

P.S. I need to that on my Component so I can know its width and height (I could do this also with a ref to the dom node and a getBBox call but I want my application to work without a browser).

My best option would be converting the component to a string, getting the points of the path and then measure the path with PathCommander's server-side getBBox or maybe some other ssr techniques like PhantomJS.

This would all work relly nice but again when I run renderToStaticString on my component, the component itself gets also called by renderToStaticString and therefore the Counting HOC gets involved in it ruining the count of the components I had).

This is because this time, when I'm calling my component function, I'm calling it only to measure the path on the fly, not to render the component into the page like I would have done with a normal React.render() or in a normal ssr rendering situation. So I need to reset the count to 0 after doing this render on the fly. SO on the page it will still act correctly but I tried everything with no luck.

I seriously can't think of a simple and correct solution that would solves this puzzle all togheter, if anyone has some starting ideas or some useful infos please SHARE IT! Here I also did a codesandbox where you can play with (just uncomment the //renderToStaticString to make it stop working (You have to manually reload or autosave won't reset the count to 0 (this is because it's not ssr here ofc).