useRenderCounter.js

function useRenderCounter(label) {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current.textContent = [
      parseInt(ref.current.textContent || "0", 10) + 1,
      label
    ]
      .filter(Boolean)
      .join(" - ");
  });
  return (
    <span
      style={{
        backgroundColor: "#ccc",
        borderRadius: 4,
        padding: "2px 4px",
        fontSize: "0.8rem",
        margin: "0 6px",
        display: "inline-block"
      }}
      ref={ref}
    />
  );
}

React Native

function useRenderCounter(label = '') {
  const inputRef = React.useRef();
  const savedCount = React.useRef(0);
  React.useEffect(() => {
    savedCount.current++;
    inputRef.current?.setNativeProps({
      text: label + (label ? ': ' : '') + savedCount.current.toString(),
    });
  });
  return (
    <TextInput
      style={{
        alignSelf: 'flex-start',
        backgroundColor: '#ccc',
        borderRadius: 4,
        paddingHorizontal: 4,
        paddingVertical: 2,
        marginHorizontal: 6,
        fontSize: 12,
        // position: 'absolute',
        transform: [{ translateX: -4 }, { translateY: -4 }]
      }}
      pointerEvents="none"
      defaultValue={savedCount.current.toString()}
      ref={inputRef}
    />
  );
}

HTML version without useEffect:

function RenderCounter(props: { label?: string } ) {
  const savedCount = useRef(0);

  return (
    <span
      style={{
        backgroundColor: "#ccc",
        borderRadius: 4,
        padding: "2px 4px",
        fontSize: "0.8rem",
        margin: "0 6px",
        display: "inline-block"
      }}
    >
      {Boolean(label) ? `${label}: ` : ''}{++savedCount.current}
    </span>
  );
}