React-Native UI Freezes after a while

Question

i'm just finished a project in react-native. I was testing my app and i realized my app is being freezed a while after i launched it, both on iOS and Android. It's like, i can scroll through the contents of the screen but i can't press neither the pressables nor the navigation tabs at the bottom. I tried on both emulators and physical devices and the problem just keeps up.

The app is a coffee delivery app and it uses fetch api on every screen, so it uses a lot of state to store service data.

I couldn't solve the problem by scaning trough the similar issues on the internet. So i wanted to ask it here.

Is it a common problem ? How can i solve it ?

Answer 1

I've found out what was causing the "freeze" problem for me. Turns out i was using "setInterval" function to get the exact time at the moment for a specific reason and it was cycling with a period of 12 seconds.

This is the code i removed :

const timeInterval = setInterval(() => {
  setDeliveryTimes(prev => {
    const buffer = prev.map(timeObj => {
      return {
        ...timeObj,
        time: calculateDeliveryTime(timeObj.duration),
      }
    })

    return [...buffer]
  })
}, 12000)

When i opened the screen that runs the setInterval, it was still runing on the background even i did navigate to a different screen so i'm guessing this function causing some performence problems in react-native app. I don't know the exact reason deep down but when i removed it, the app maintained ok. If someone knows more deep about this, please care to make a comment to explain.