Creating Timers in React: Simplifying Time Management With Hooks

Using React, hooks and timers, time feature development is easy.

Timers are a common requirement in many applications, whether it’s displaying countdowns, implementing stopwatches, or managing time-related tasks. In this blog post, we’ll explore how to create timers in React using hooks, focusing on the user-friendly @gabrielyotoo/react-use-timer library.

Our goal is to empower you to efficiently manage timers in your React applications. We’ll walk you through practical examples, such as automatically resending SMS codes for OTP verification. By leveraging hooks, we can simplify the code and make it more maintainable.

How hooks works

React hooks, introduced in React 16.8, revolutionized stateful logic in functional components. With hooks, you can easily manage state and perform side effects within functional components.

Hooks promote code reuse, encapsulation, and composability, working seamlessly with functional components and embracing the benefits of functional programming. By utilizing hooks, you can create timers in React more efficiently and concisely. In this blog post, we’ll explore how to leverage hooks, specifically the @gabrielyotoo/react-use-timer library, to simplify timer management in functional components, empowering you to handle time-related tasks effortlessly.

How to use this library to easily create timers

@gabrielyotoo/react-use-timer library offers a seamless and intuitive way to handle timers:

1. Hooks-Based Approach: This library embraces the power of hooks, leading to cleaner and more reusable code.
2. Simplified Timer Management: This hook provides a straightforward API that allows you to start, stop, and reset timers with ease.
3. Flexibility and Customization: The hook also offers a range of configuration options to cater to your specific timer needs. You can customize the initial timer value, interval duration, and even handle timer completion and start events effortlessly.

To get started with @gabrielyotoo/react-use-timer we’ll need to install it:

yarn add @gabrielyotoo/react-use-timer

1. Import the Hook: Import the useTimer hook into your React component:

import { useTimer } from '@gabrielyotoo/react-use-timer';

2. Use the Hook: Start using the useTimer hook within your component:

const MyComponent = () => {
  const { currentTime, start, pause } = useTimer(10);

  return (
      <div>
        <p>Time: {currentTime}</p>
        <button onClick={start}>Start</button>
        <button onClick={pause}>Pause</button>
      </div>
    );
};

In the example above, we’ve created a basic timer component using the useTimer hook. We can access the current time through the currentTimer variable returned by the hook. The start and pause functions handle the respective timer actions.

Example: Resending SMS Codes for OTP Verification

Let’s consider a practical scenario where we want to implement an OTP verification system that automatically resends SMS codes after a certain interval. Using @gabrielyotoo/react-use-timer, we can achieve this functionality easily:

import { useTimer } from '@gabrielyotoo/react-use-timer';

const OTPVerification = () => {
  const { currentTime, isRunning, start } = useTimer(60);

  const handleResend = () => {
    // Code to resend the SMS
    // Reset the timer
    start();
  };

  return (
    <div>
      {
        isRunning
          ? <p>Time Remaining: {currentTime}</p>
          : <button onClick={handleResend}>Resend OTP</button>
      }
    </div>
  );
};

In this example, we initialize the timer with an initial value of 60 seconds. When the user clicks the “Resend OTP” button, we trigger the handleResend function, which resets the timer and starts it again.

Conclusion

Timers are essential in many React applications, and we can simplify the process of managing timers using hooks. By utilizing this library, you can easily create timers, customize their behavior, and handle all types of scenarios, such as countdown timers, auto logout, slideshow or carousel, game mechanics, retry mechanisms and timeout notifications.

We hope this comprehensive guide has provided you with the knowledge and tools to efficiently incorporate timers into your React projects. Remember, hooks offer a powerful way to manage state and lifecycle methods within functional components, promoting clean and maintainable code.

Now it’s your turn to explore @gabrielyotoo/react-use-timer and unleash the potential of timers in your React applications. Happy coding!

Further reading…

That’s all! Hope you enjoyed that article! Here are some other link to check and improve your knowledge:

Reusing Logic with Custom Hooks — React

gabrielyotoo/react-use-timer: Hook for timer in ReactJS (github.com)

Check out my social

To stay connected follow me on Linkedin: Gabriel Freitas Yamamoto