# useInterval

*Category:* Utilities
*Section:* Lifecycle & execution hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useInterval
*Captured:* 2026-04-27T14:59:31.082Z

The useInterval hook allows for executing some code after a specified amount of time.

## useInterval

### Example: Example 1

Count: 0

Stop

#### React (tsx)

```tsx
import { useState } from 'react';

import useInterval from '@rio-cloud/rio-uikit/useInterval';

export default () => {
    const [count, setCount] = useState(0);
    const [delay, setDelay] = useState(1000);
    const [isRunning, setIsRunning] = useState(true);

    useInterval(
        () => {
            // Your custom logic here
            setCount(count + 1);
        },
        isRunning ? delay : null
    );

    return (
        <div className='display-flex flex-column justify-content-center align-items-center'>
            <div className='display-flex flex-column justify-content-center align-items-center margin-bottom-20'>
                <label>Count:</label>
                <div className='h2 margin-0'>{count}</div>
            </div>
            <div className='form-group display-flex gap-10'>
                <input
                    className='form-control'
                    value={delay}
                    onChange={event => setDelay(Number(event.target.value))}
                />
                <button className='btn btn-default' type='button' onClick={() => setIsRunning(!isRunning)}>
                    {isRunning ? 'Stop' : 'Start'}
                </button>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center">
    <div class="display-flex flex-column justify-content-center align-items-center margin-bottom-20">
        <label>Count:</label>
        <div class="h2 margin-0">0</div>
    </div>
    <div class="form-group display-flex gap-10">
        <input class="form-control" value="1000">
        <button class="btn btn-default" type="button">Stop</button>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| callback | Function | — | The callback function to be triggered. |
| delay | Number | — | The time to wait until the callback function gets invoked. |