calling a function in componentDidMount react native

Question

I am trying to call a function upon mounting a component, this function controls some state manipulations. I am not sure I am doing it right. I want the timer to restart once it gets to 20, since there is no button, I am assuming it should be done in the componentDidMount. can someone please point me in the right direction. below is a trimmed down sample code of what I am trying to achieve.

        constructor(props) {
          super(props);
          this.state = { 
            timer: 10,
            timesup: false,
            timing: true,
            showWelcome: true, 
            };
        }

        componentDidMount() {
          this.endTimer();
        this.clockCall = setInterval(() => {
          this.decrementClock();
        }, 1000);
        }

        endTimer = () => {
          if (this.state.timer <= 25) {
                this.setState({
                  timing: true,
                  timer: 30,
                  showWelcome: true,
                  timesup: false,
                })
          }

        }


        decrementClock = () => {  
          this.setState((prevstate) => ({ 
            timer: prevstate.timer-1 
          }), () => {
            if(this.state.timer === 0) {
              clearInterval(this.clockCall)
              this.setState({
                timesup: true,
                timing: false,
                showWelcome: false,
              })
            }
          })
        }


        componentWillUnmount() {
        clearInterval(this.clockCall);
        }


        render() {
          return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        {this.state.timesup && (
            <Text style={{fontSize: 18, color: '#000'}}>
            Time up
            </Text>)}


        {this.state.timing && (
            <Text style={{fontSize: 18, color: '#000'}}>
            {this.state.timer}
            </Text>)}

              {this.state.showWelcome && (
                <Text style={{ fontSize: 20 }}>Welcome</Text>
              )}
            </View> 
          )
        }
        }

Answer 1

I want the timer to restart once it gets to 20, since there is no button, I am assuming it should be done in the componentDidMount.

No, you need to use componentDidUpdate lifecycle method to check timer's current value. componentDidMount is called only once at the mounting stage.

So, remove this.endTimer(); from componentDidMount.

  componentDidMount() {
    this.clockCall = setInterval(() => {
      this.decrementClock();
    }, 1000);
  }

Then implement componentDidUpdate method like this:

  componentDidUpdate(){
    if(this.state.timer <= 20){
      this.endTimer();
    }
  }

endTimer() like this:

  endTimer = () => {
      this.setState({
        timing: true,
        timer: 30,
        showWelcome: true,
        timesup: false,
      })
  }