Recursive Measure Render

thing.js

function recursiveMap(children, fn) {
  return React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) {
      return child;
    }

    if (child.props.children) {
      child = React.cloneElement(child, {
        children: recursiveMap(child.props.children, fn),
      });
    }

    return fn(child);
  });
}
const RecursiveMeasureRender = ({ children, postfix = '' }) => {
  const fn = (el) => {
    const componentName = el?.type?.displayName || el?.type?.name;
    if (componentName && !componentName?.includes?.('LazyHydrate') && !componentName?.includes?.('MeasureRender')) {
      // if (!el?.type?.displayName) console.log('missing displayName', el?.type?.name);
      return (
        <MeasureRender name={(el.type.displayName || el.type.name) + postfix}>
          {React.isValidElement(el) && el}
        </MeasureRender>
      );
    }
    return el;
  };
  if (process.browser) {
    if (window.withPerf) {
      return <>{recursiveMap(children, fn)}</>;
    }
  }
  return children;
};