# useAfterMount

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

The useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.

## useAfterMount

### Example: Example 1

Count: 0
Increment

#### React (tsx)

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

import Button from '@rio-cloud/rio-uikit/Button';
import useAfterMount from '@rio-cloud/rio-uikit/useAfterMount';

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

    // This will run on initial mount and whenever 'count' changes
    useEffect(() => {
        console.log('useEffect: Component mounted or count changed:', count);
    }, [count]);

    // This will run only after the initial mount when 'count' changes
    useAfterMount(() => {
        console.log('useAfterMount: Count changed:', count);
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <Button onClick={() => setCount(count + 1)}>Increment</Button>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <p>Count: 0</p>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Increment</button>
</div>
```

#### Props

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