title: How to implement global variable in react functional components
body: <p>I am new to react and decided to practice by implementing a simple stop watch using both class and functional components.</p>
  <p>I successfully implemented the stop watch using a class component. Below is the code:</p>
  <p><strong>Class Component</strong></p>
  <pre><code>
  class Stopwatch extends Component {
    state = {
      status: false,
      ms: 0,
      seconds: 0,
      minutes: 0,
    };
  
    stopms;
    stopSeconds;
    stopMinutes;
  
    handleClick = () =&gt; {
      this.changeStatus();
      if (this.state.status) {
        clearInterval(this.stopms);
        clearInterval(this.stopSeconds);
        clearInterval(this.stopMinutes);
      } else {
        this.stopms = setInterval(this.changeMs, 1);
        this.stopSeconds = setInterval(this.changeSeconds, 1000);
        this.stopMinutes = setInterval(this.changeMinutes, 60000);
      }
    };
  
    changeStatus = () =&gt; {
      return this.setState((state) =&gt; {
        return { status: !state.status };
      });
    };
  
    changeMs = () =&gt; {
      return this.setState((state) =&gt; {
        if (state.ms === 99) {
          return { ms: 0 };
        } else {
          return { ms: state.ms + 1 };
        }
      });
    };
  
    changeSeconds = () =&gt; {
      return this.setState((state) =&gt; {
        if (state.seconds === 59) {
          return { seconds: 0 };
        } else {
          return { seconds: state.seconds + 1 };
        }
      });
    };
  
    changeMinutes = () =&gt; {
      return this.setState((state) =&gt; {
        if (state.seconds === 59) {
          return { minutes: 0 };
        } else {
          return { minutes: state.minutes + 1 };
        }
      });
    };
  
    handleReset = () =&gt; {
      clearInterval(this.stopms);
      clearInterval(this.stopSeconds);
      clearInterval(this.stopMinutes);
      this.setState({ seconds: 0, status: false, minutes: 0, ms: 0 });
    };
  
    componentWillUnmount() {
      clearInterval(this.stopms);
      clearInterval(this.stopSeconds);
      clearInterval(this.stopMinutes);
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;
            {this.state.minutes} : {this.state.seconds} .{&quot; &quot;}
            &lt;span&gt;{this.state.ms}&lt;/span&gt;
          &lt;/h1&gt;
          &lt;button className=&quot;btn btn-lg btn-dark&quot; onClick={this.handleClick}&gt;
            {this.state.status === false ? &quot;Start&quot; : &quot;Pause&quot;}
          &lt;/button&gt;
          &lt;button className=&quot;btn btn-lg btn-dark&quot; onClick={this.handleReset}&gt;
            Reset
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Stopwatch;
  </code></pre>
  <p>Now I'm trying to implement the same code above but using a functional component as shown below:</p>
  <p><strong>Functional Component</strong></p>
  <pre><code>
  function Stopwatch() {
    const [timeState, setTimeState] = useState({
      status: false,
      ms: 0,
      seconds: 0,
      minutes: 0,
    });
  
    let stopms;
    let stopSeconds;
    let stopMinutes;
  
    const handleClick = () =&gt; {
      changeStatus();
      if (timeState.status) {
        clearInterval(stopms);
        clearInterval(stopSeconds);
        clearInterval(stopMinutes);
      } else {
        stopms = setInterval(changeMs, 1);
        stopSeconds = setInterval(changeSeconds, 1000);
        stopMinutes = setInterval(changeMinutes, 60000);
      }
    };
  
    const changeStatus = () =&gt; {
      return setTimeState((prevState) =&gt; {
        return { ...prevState, status: !prevState.status };
      });
    };
  
    const changeMs = () =&gt; {
      return setTimeState((prevState) =&gt; {
        if (prevState.ms === 99) {
          return { ...prevState, ms: 0 };
        } else {
          return { ...prevState, ms: prevState.ms + 1 };
        }
      });
    };
  
    const changeSeconds = () =&gt; {
      return setTimeState((prevState) =&gt; {
        if (prevState.seconds === 59) {
          return { ...prevState, seconds: 0 };
        } else {
          return { ...prevState, seconds: prevState.seconds + 1 };
        }
      });
    };
  
    const changeMinutes = () =&gt; {
      return setTimeState((prevState) =&gt; {
        if (prevState.seconds === 59) {
          return { ...prevState, minutes: 0 };
        } else {
          return { ...prevState, minutes: prevState.minutes + 1 };
        }
      });
    };
  
    const handleReset = () =&gt; {
      clearInterval(stopms);
      clearInterval(stopSeconds);
      clearInterval(stopMinutes);
      setTimeState({ seconds: 0, status: false, minutes: 0, ms: 0 });
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;
          {timeState.minutes} : {timeState.seconds} . &lt;span&gt;{timeState.ms}&lt;/span&gt;
        &lt;/h1&gt;
        &lt;button className=&quot;btn btn-lg btn-dark&quot; onClick={handleClick}&gt;
          {timeState.status === false ? &quot;Start&quot; : &quot;Stop&quot;}
        &lt;/button&gt;
        &lt;button className=&quot;btn btn-lg btn-dark&quot; onClick={handleReset}&gt;
          Reset
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Stopwatch;
  </code></pre>
  <p><strong>The Problem</strong></p>
  <p>In the class component, I implemented the &quot;Pause&quot; functionality using the handleClick function which calls clearInterval with it's argument as the global variables stopms, stopSeconds, stopMinutes that I declared initially. This worked just fine because these global variables were holding values returned from the respective setInterval when the stop watch started counting.</p>
  <p>Now in the functional component, I replicated the same logic by declaring the same global variables using the &quot;let&quot; keyword. But the &quot;Pause&quot; functionality is not working. When the &quot;Start&quot; button hit and the handleClick function called, the setIntervals were called and their return values were stored in the respective global variables. But when the &quot;Pause&quot; button was hit, all the global variables had &quot;undefined&quot; as their values.</p>
  <p><strong>Please I would like to know if there's any other way I can declare global variables and use them to hold values throughout a component's life cycle asides using state.</strong></p>