RenderCounter for React Native

App.jsx

import { Text, View } from 'react-native';
import RenderCounter, { RenderCounterProvider } from "./lib/RenderCounter";

function Home() {
  return (
    <>
      <View>
        <Text>Welcome!</Text>
      </View>
      <View>
        <RenderCounter />        
      </View>
    </>
  );
}

function App() {
  return (
    <RenderCounterProvider>
      <Home />
    </RenderCounterProvider>
  );
}

ComponentToCount.jsx

import { useCountRenders } from "./lib/RenderCounter";

function ComponentToCount() {
  useCountRenders('<ComponentToCount />');
}

RenderCounter.jsx

import React from 'react';
import { Text, View } from 'react-native';

export const CounterContext = React.createContext({});
export const IncrementContext = React.createContext(() => {});

const style = {
  viewWrapper: {
    position: 'absolute',
    top: 200,
    left: 10,
    width: 220,
    borderWidth: 1,
    backgroundColor: '#ffffff',
    borderColor: '#eeeeee',
  },
};

export function RenderCounterProvider(props) {
  const [ counters, setCounters ] = React.useState({});
  const countersRef = React.useRef();
  const timerRef = React.useRef();

  const increment = React.useCallback((key) => {
    const counters = countersRef.current || {};
    countersRef.current = {
      ...counters,
      [key]: (counters[key] || 0) + 1,
    };
    setTimeout(() => {
      setCounters({ ...countersRef.current });
    }, 1000);
  }, [ setCounters ]);

  return (
    <CounterContext.Provider value={counters}>
      <IncrementContext.Provider value={increment}>
        {props.children}
      </IncrementContext.Provider>
    </CounterContext.Provider>
  );
}

export function useCountRenders(name) {
  const increment = React.useContext(IncrementContext);
  increment(name);
}

export function CountRenders({ name }) {
  const increment = React.useContext(IncrementContext);
  React.useEffect(() => {
    increment(name);
  });
  return <View />;
}

function RenderCounter() {
  const counterContext = React.useContext(CounterContext);
  const counterNames = React.useMemo(() => Object.keys(counterContext), [ counterContext ]);
  if (counterNames.length === 0 || !global.__DEV__) return <View />;
  return (
    <View style={style.viewWrapper}>
      {counterNames.map((name) => (
        <Text key={name}>
          {name}
          {' '}
          {counterContext[name]}
        </Text>
      ))}
    </View>
  );
}

export default RenderCounter;