Learn React Hooks

The useInterval Hook

The useInterval Hook can be used just like setInterval. We are now going to implement a small counter that counts the number of seconds since mounting the component:

1. First, import the useState and useInterval Hooks:

import React, { useState } from 'react'import { useInterval } from 'react-hookedup'

2. Then, we define our component and a State Hook:

export default function UseInterval () {    const [ count, setCount ] = useState(0)

3. Next, we define the useInterval Hook, which is going to increase the count by 1 every 1000 ms, which is equal to 1 second:

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

4. Finally, we display the current count value:

    return <div>{count} seconds passed</div>}

Alternatively, we could use an Effect ...