# useEffectOnce

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

The useEffectOnce hook allows to use a side effect only once after the component has been mounted.

## useEffectOnce

### Example: Example 1

0
Increment

#### React (tsx)

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

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

export default () => {
    const [count, setCount] = useState(0);

    useEffectOnce(() => alert('Hi'));

    return (
        <div className='display-flex flex-column justify-content-center align-items-center'>
            <div className='margin-15'>{count}</div>
            <button className='btn btn-default' type='button' onClick={() => setCount(value => value + 1)}>
                Increment
            </button>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center">
    <div class="margin-15">0</div>
    <button class="btn btn-default" type="button">Increment</button>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| callback | Function | — | The effect callback function to be used after the component has been mounted. |