React Native - Multiple countdown timers in one view with out re-rendering

Question

I am building an app that has a screen in a stack navigator that renders multiple touchableOpacity's, all with an independent and unique countdown timer in seconds.

Each TouchableOpacity displays the remaining seconds in the count by subtracting the difference of the unique time and current time. The current time is stored as a state variable and when the component mounts, the function below is called.

    initTime() {
        setInterval( () => {
            this.setState({
                currentTime : new Date()
            })
          },1000)
    }

My issue is mainly performance, the view needs to re-render every second which causes older devices to really struggle with the constant rendering.

Is there any way I can achieve this without needing to re-render every second?

Answer 1

Simply create a count down component separately and import it anywhere. this component only updates himself and has not any issue on the parent view. I checked this method for about 100 components in one view and has not any problem.