use-set-interval

✴ Project Homepage : Documentation and Examples ✴

useSetInterval

A React Hook (using useEffect) which uses window.setInterval().

Note: this was published and didn't work a few days before Dan published this Making setInterval Declarative with React Hooks, which saved my bacon. Many thanks.

Synopsis

In your React component, increment a counter every second:

import { useState } from 'react'
import useSetInterval from "use-set-interval"

function SetInterval() {
  const [ count, setCount ] = useState(0)

  useSetInterval(() => setCount(count + 1), 1000)

  return <p>Count = { count }</p>
}

There is no need to keep a reference to the interval ID since it will be automatically cleared when the component unmounts.

Please note that the interval is cleared and reset if you change the interval ms but not if you change the function fn. This is a good thing, since it allows you to change the interval in a declarative way, instead of having to fiddle with the interval IDs yourself.

Usage

useSetInterval(fn, delay)

• fn is a function to execute
• delay is the delay between executions in milliseconds

Other Hooks

Please see all of the other reacthooks.org hooks:

• use-document-title - Change the document.title
• use-resize - Subscribe to Window 'resize' events and get the width and height
• use-window-width - Subscribe to Window 'resize' events and get the width
• use-online - Get online/offline status
• use-match-media - Get whether a media query is matched
  • .usePrefersColorScheme() - Get whether the user prefers the 'light' or 'dark' color scheme
• use-set-timeout - use and automatically clear a setTimeout()
• use-set-interval - use and automatically clear a setInterval()
• use-orientation-change - get Device Orientation updates
• use-session-storage - gets and sets a key in window.sessionStorage
• use-form-validation - helps manage form values, validation, and errors

Author

$ npx chilts

   ╒════════════════════════════════════════════════════╕
   │                                                    │
   │   Andrew Chilton (Personal)                        │
   │   -------------------------                        │
   │                                                    │
   │          Email : [e-mail]             │
   │            Web : https://chilts.org                │
   │        Twitter : https://twitter.com/andychilton   │
   │         GitHub : https://github.com/chilts         │
   │         GitLab : https://gitlab.org/chilts         │
   │                                                    │
   │   Apps Attic Ltd (My Company)                      │
   │   ---------------------------                      │
   │                                                    │
   │          Email : [e-mail]              │
   │            Web : https://appsattic.com             │
   │        Twitter : https://twitter.com/AppsAttic     │
   │         GitLab : https://gitlab.com/appsattic      │
   │                                                    │
   │   Node.js / npm                                    │
   │   -------------                                    │
   │                                                    │
   │        Profile : https://www.npmjs.com/~chilts     │
   │           Card : $ npx chilts                      │
   │                                                    │
   ╘════════════════════════════════════════════════════╛

(Ends)