ReactRerenderHighlight.tsx

const DefaultRenderAnimationOutput = ({name, count}) => {
  return (
    <>
      <span className="RenderAnimation-name">{name} </span>
      <span className="RenderAnimation-count">{count}</span>
    </>
  );
};

function useRenderAnimation(
  name,
  animationName,
  renderOutput = DefaultRenderAnimationOutput
) {
  const renders = React.useRef(1);
  const ref = React.createRef();

  React.useEffect(() => {
    renders.current = renders.current + 1;
    ref.current.style.animation = `${animationName}  750ms ease-out`;
    ref.current.onanimationend = () => {
      if (ref.current) {
        ref.current.style.animation = null;
      }
    };
  });

  const renderCounter = (
    <div className="RenderAnimation" ref={ref}>
      {renderOutput(name, renders.current)}
    </div>
  );

  return { ref, renderCounter };
}

function RenderWithHighlight({ name, children }) {
  const animationName = "ContextPulse";
  const { renderCounter } = useRenderAnimation(name, animationName);

  return (
    <div className="Block RenderCheck">
      {renderCounter}
      <div className="RenderCheck-children">{children}</div>
    </div>
  );
}

style.css

.RenderAnimation {
  padding: 16px 24px;
  border-radius: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.RenderAnimation-name {
  font-weight: 600;
}

.RenderCheck-children {
  padding: 10px 0 0 10px;
}

@keyframes ContextPulse {
  0% {
    background-color: var(--context-color);
  }
  100% {
    background-color: var(--main-bg-color);
  }
}

@keyframes RenderPulse {
  0% {
    background-color: var(--render-color);
  }
  100% {
    background-color: var(--main-bg-color);
  }
}