Learn React Hooks

useTimeout Hook

The useTimeout Hook can be used just like setTimeout. We are now going to implement a component that triggers after 10 seconds have passed:

1. First, import the useState and useTimeout Hooks:

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

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

export default function UseTimeout () {    const [ ready, setReady ] = useState(false)

3. Next, we define the useTimeout Hook, which is going to set ready to true, after 10000 ms (10 seconds):

    useTimeout(() => setReady(true), 10000)

4. Finally, we display whether we are ready or not:

    return <div>{ready ? 'ready' : 'waiting...'}</div>}

Alternatively, we could use an Effect Hook in combination with setTimeout ...