I have a react native component which is running an async function on an interval timer. When testing this on an old android phone I was surprised to see some serious performance issues.

Any buttons in the UI are completely unresponsive whilst the testIntervalAsync function is running, but oddly the nested ScrollView component is perfectly responsive to touch (it can still be scrolled).

I'm fairly new to react native, so would anyone be able to give any insight into why it runs so slowly?

const TestScreen = ({}: TestScreenProps) => {
...
useEffect(() => {
  const interval = setInterval( async () => {
      testIntervalAsync ();
    }, 1000);

  const testIntervalAsync = async () => {
    for(let i = 0; i < 5000; i++ )
      console.log("Test interval: ", i);
      };

  return (() => {
    clearInterval(interval);
    })
  }, []);

return (
    <Box>
      ...
      <ScrollView>
        ...
      </ScrollView>
      ...
    </Box>
    );
};