CODEWITHSUNDEEP
javascriptreactjstimerreact-native
Paul Clark
Paul Clark

Reputation: 71

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

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?

Upvotes: 1

Views: 2283

Answers (1)

Reza Madani
Reza Madani

Reputation: 353

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.

Upvotes: 2

Related Questions