use-timers-react

use-timers-react is a drop-in replacement for traditional JavaScript timing APIs, tailored for React. This library introduces hooks that enhance the implementation of timers, intervals, and timeouts in your React components, ensuring seamless integration and reliability. With automatic cleanup on component unmount, it eliminates the need for manual timing management, making your code cleaner and more efficient.

Uses

Setting timers

import {useInterval, useTimeout} from  'use-timers-react'

export  default  function  App () {
	const {setTimeout} =  useTimeout();
	const {setInterval} =  useInterval();

	function  demo(){
		setTimeout(() => {
			console.log('hello react from timeout');
		}, 1000);

		setInterval(() => {
			console.log('hello react from interval');
		}, 1000);
	}

	return  <JSX/>
	}

Clearing timers

Though automatic timer cleanup on component unmount is handled for you, still if you need to cancel timers conditionally, the following methods are available:

1. Using .clear() method (recommended)

import {useInterval, useTimeout} from  'use-timers-react'

export  default  function  App () {

	const {setTimeout} =  useTimeout();

	function  demo(){
		const  logTime  = () =>  console.log('hello react: ', Date.now());
		let  myTimer  =  setTimeout(logDate, 100);
		myTimer.clear();
	}

	return <JSX/>
}

2. Using clearTimeout or clearInterval

import {useInterval, useTimeout} from  'use-timers-react'

export  default  function  App () {
	const {setTimeout, clearTimeout} =  useTimeout();

	function  demo(){
		let  timeout  =  setTimeout(() => {
		console.log('hello react from timeout');
		}, 1000);

		clearTimeout(timeout);
	}

	return  <JSX/>
}

3. Using clearAllTimeouts or clearAllIntervals

import {useInterval, useTimeout} from  'use-timers-react'

export  default  function  App () {
	const {setTimeout, clearAllTimeouts} =  useTimeout();

	function  set2Timers(){
	const  logTime  = () =>  console.log('hello react: ', Date.now());

	setTimeout(logTime, 1000);
	setTimeout(logTime, 2000);
	}

	return  <>
		<JSX/>
		<button onClick={()=>clearAllTimeouts()}>clear all timeouts</button>
	</>
}

4. Using key

A key can be specified in two ways:

• as string to the last argument

• object to the last argument

import {useInterval, useTimeout} from  'use-timers-react'

export  default  function  App () {
	const {setTimeout, clearTimeout} =  useTimeout();

	function  set2Timers(){
		const  logTime  = () =>  console.log('hello react: ', Date.now());

		//passing key as string
		setTimeout(logTime, 2000, 'timer1');
		//passing key using object
		setTimeout(logTime, 2000, {key:  'timer2'});
	}

  

	function  clearTimer(){
		clearTimeout('timer1');
		clearTimeout('timer2');
	}

return  <JSX/>
}

Advanced

1. Resetting times: using .reset

import {useInterval, useTimeout} from  'use-timers-react'

export  default  function  App () {
	const {setTimeout} =  useTimeout();

	function  demo(){
		const  logTime  = () =>  console.log('hello react: ', Date.now());

		let  myTimer  =  setTimeout(logDate, 1000);
		setTimeout(()=>myTimer.reset(), 500)
	}

	return <JSX/>
}

2. onClear and onReset callbacks:

import {useInterval, useTimeout} from  'use-timers-react'

  

export  default  function  App () {
	const {setTimeout} =  useTimeout();

	function  demo(){
		const  logTime  = () =>  console.log('hello react: ', Date.now());

		let  myTimer  =  setTimeout(logDate, 1000, {
			onClear: () =>  console.log('cleared'),
			onReset: () =>  console.log('reset'),
		});

		setTimeout(()=>myTimer.reset(), 500)
	}

	return <JSX/>
}