How to Create a React Timer Using Functional Hooks Without It Running Forever

Learn how to properly implement a countdown timer in React using functional hooks like `useState` and `useEffect`, avoiding issues with it running indefinitely.
---
This video is based on the question stackoverflow.com/q/68291293/ asked by the user 'Ujjwal Chaudhary' ( stackoverflow.com/u/14756378/ ) and on the answer stackoverflow.com/a/68291421/ provided by the user 'pilchard' ( stackoverflow.com/u/13762301/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React Timer using functional Hooks | Timer is not stopping

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Creating a React Timer with Functional Hooks

When it comes to building web applications with React, one of the common challenges developers face is implementing timers. Specifically, many developers encounter an issue where the timer keeps running indefinitely instead of stopping at the desired time limit. In this guide, we'll discuss how to successfully implement a countdown timer in React using functional components, useState, and useEffect.

The Problem

In your initial implementation, the primary issue arises from the way you set up the timer. The setInterval function keeps running without clearing itself, causing the timer to run endlessly. Here’s a quick summary of the problems:

Empty Dependency Array: By passing an empty array to useEffect, the effect only runs once when the component mounts. This means the timer is initialized only a single time without updates on subsequent renders.

No Cleanup Function: Failing to clear the interval leads to multiple intervals running simultaneously, causing the timer to function erratically and continue running.

The Solution

To resolve these issues, we need to adjust the way we set up the interval in your React component. Let's break it down into clear steps:

1. Update the useEffect Hook

Instead of an empty dependency array, include time as a dependency. This allows the effect to run every time the time state gets updated, enabling us to manage the timer efficiently.

Here’s how you should modify the useEffect:

[[See Video to Reveal this Text or Code Snippet]]

2. Complete Timer Component

Here’s the complete updated Timer component:

[[See Video to Reveal this Text or Code Snippet]]

3. Explanation of the Changes

Conditionally Set Interval: We check if time is less than 60 before starting the timer. This prevents unnecessary intervals from running.

Cleanup Function: The return statement in useEffect clears the interval whenever time updates, effectively stopping the old timer.

Benefits of This Approach

Using React's rendering cycle to manage intervals gives you unbounded control over timers. You can extend your timer logic easily, and make it responsive to other state changes.

Conclusion

Implementing a countdown timer in React using functional hooks is quite straightforward when you follow the right approach. By utilizing the useState and useEffect hooks correctly, you can create a robust timer that behaves as expected, preventing any endless loops. Don’t forget to always clean up your intervals to maintain the performance of your React applications.

Feel free to try out the above code in your React project and let us know how it works for you!