useInterval.md

useInterval

An async-utility hook that accepts a callback function and a delay time (in milliseconds), then repeat the execution of the given function by the defined time.

Why? 💡

• takes care of performing the given callback regardless the component re-renders;
• cancels the interval when the component unmount (or not, depends by the defined options);
• returns the interval state (cleared/not cleared)
• returns a method to possibly cancel the set interval (cause the component re-render)

Basic Usage:

import { useState } from 'react'; 
import { useInterval } from 'beautiful-react-hooks'; 

const DelayedContentComponent = () => {
   const [seconds, setSeconds] = useState(0);
   
   // repeat the function each 1000ms
   useInterval(() => {
     setSeconds(1 + seconds);
   }, 1000);
   
   return (
     <DisplayDemo>
       <p>Rendering since {seconds} seconds</p>
     </DisplayDemo>
   );
};

<DelayedContentComponent />

State & clear method:

The hook returns the state of the timeout (a boolean, cleared/not cleared) and a method to possibly clear it.

Note: programmatically clearing the timeout will cause the component re-render.

import { useState } from 'react'; 
import { useInterval } from 'beautiful-react-hooks'; 

const DelayedContentComponent = () => {
   const [seconds, setSeconds] = useState(0);
   const [isCleared, clearInterval] = useInterval(() => {
     setSeconds(1 + seconds);
   }, 1000);
   
   return (
     <DisplayDemo>
       <p>Rendering since {seconds} seconds</p>
       {!isCleared && <button onClick={clearInterval}>Stop it!</button>}
       {isCleared && <p>Interval cleared!</p>}
     </DisplayDemo>
   );
};

<DelayedContentComponent />

Options:

useInterval might accept a options object provided as eventual parameter.

cancelOnUnmount:

Defines whether the timeout should be cleared on unmount.

default: true

import { useState } from 'react'; 
import { useInterval } from 'beautiful-react-hooks'; 

const DelayedContentComponent = () => {
   const [seconds, setSeconds] = useState(0);
   const options = { cancelOnUnmount: false };
   
   useInterval(() => setSeconds(1 + seconds), 1000, options);

   return (
     <DisplayDemo>
       <p>Content rendering since {seconds} but will not be cleared on unmount</p>
     </DisplayDemo>
   );
};

<DelayedContentComponent />

Mastering the hook

✅ When to use

• If in need to perform a function every x number of milliseconds regardless the component re-renders

🛑 When not to use

• You can't use it asynchronously since this will break the rules of hooks