How to create a Timer in React JS?

In this tutorial, we will learn how to create a Timer in React Js. It will have basic three buttons- start, stop and reset. We will use the setInterval function which repeats a given function after every given time interval. You can go through setInterval() here.

How to create a Timer in React JS

Let us first create three buttons and a state to store the seconds. The code will look like this:

import React, { Component } from 'react'

class App extends Component {
  constructor(props){
    super(props);
    this.state={seconds:0};
  }
render(){
    return(
        <div>
            <h1>{this.state.seconds}</h1>
            <button>Start</button>
            <button>Stop</button>
            <button>Reset</button>
        </div>
    )
}
}

export default App

The output would look like this

Nothing will happen if we click the buttons now. So, we will create functions for each of our buttons. Look at the code below:

onStart=()=>{
   this.setState({seconds:this.state.seconds+1});

}
timer=()=>{
  this.f=setInterval(this.onStart,1000);
}
onPause=()=>{
    clearInterval(this.f);
}
onReset=()=>{
    clearInterval(this.f);
    this.setState({seconds:0})
}

The onStart function increments the value of the state variable, seconds, by one and updates it using setState.

The timer function calls the onStart function repeatedly after 1000 milliseconds which is equal to 1 second. This is the main function of the entire code as this sets the interval in which the onStart function should be called. The setInterval returns a variable or interval id, which we are storing in the variable f. We will pass this function in the onClick attribute of the start button. So, when the user clicks on start, the interval starts from the beginning.

The onPause function clears the interval by calling the clearInterval() method. We are passing the interval id returned by setInterval as an argument. This will stop the execution of the onStart function. We will pass this function in the onClick attribute of the stop button.

The onReset function clears the interval and sets the value of the state to 0, thus resetting its value. We will pass this function in the onClick attribute of the reset button.

This completes our code and we built a simple timer in React. The full code will look like this.

import React, { Component } from 'react'

class App extends Component {
  constructor(props){
    super(props);
    this.state={seconds:0};
}
onStart=()=>{
   this.setState({seconds:this.state.seconds+1});

}
timer=()=>{
  this.f=setInterval(this.onStart,1000);
  document.getElementById('btn').disabled=true;
}
onPause=()=>{
    clearInterval(this.f);
}
onReset=()=>{
    clearInterval(this.f);
    document.getElementById('btn').disabled=false;
    this.setState({seconds:0})
}
render(){
    return(
        <div>
            <h1>{this.state.seconds}</h1>
            <button id='btn' onClick={this.timer}>Start</button>
            <button onClick={this.onPause}>Stop</button>
            <button onClick={this.onReset}>Reset</button>
        </div>
    )
}
}

export default App

We have used the disabled property of button to prevent the user from clicking on the start button more than once. After clicking reset, the start button again becomes clickable.

The output would look like this

The timer would continue until we click either the stop or reset button. This is all about how to create a timer in React Js. It was a basic timer with minimal functionalities.

Keep Learning.