# useDebugInfo

*Category:* Utilities
*Section:* UI state & input hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDebugInfo
*Captured:* 2026-04-27T14:59:43.208Z

The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.

## useDebugInfo

### Example: Example 1

Component props: isToggled: false
count: 0

Debug Info: {
"renderCount": 1,
"changedProps": {},
"timeSinceLastRender": 0,
"lastRenderTimestamp": 1777301982498
}

Toggle Increment

#### React (tsx)

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

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

const ChildComponent = (props: { isToggled?: boolean; count?: number }) => {
    const { isToggled, count } = props;

    const info = useDebugInfo('ChildComponent', props);

    return (
        <div className='margin-bottom-25 padding-15 border'>
            <div>
                <label>Component props:</label>
                <div>
                    <b>isToggled: </b>
                    {isToggled?.toString()}
                </div>
                <div>
                    <b>count: </b>
                    {count}
                </div>
            </div>
            <div className='margin-top-20'>
                <label>Debug Info:</label>
                <pre className='bg-none text-size-12 text-color-darker'>{JSON.stringify(info, null, 1)}</pre>
            </div>
        </div>
    );
};

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

    return (
        <div>
            <ChildComponent isToggled={toggle} count={count} />
            <div className='btn-toolbar'>
                <Button onClick={() => setToggle(!toggle)}>Toggle</Button>
                <Button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</Button>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="margin-bottom-25 padding-15 border">
        <div>
            <label>Component props:</label>
            <div>
                <b>isToggled: </b>false
            </div>
            <div>
                <b>count: </b>0
            </div>
        </div>
        <div class="margin-top-20">
            <label>Debug Info:</label>
            <pre class="bg-none text-size-12 text-color-darker">{
 "renderCount": 1,
 "changedProps": {},
 "timeSinceLastRender": 0,
 "lastRenderTimestamp": 1777301982498
}</pre>
        </div>
    </div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle</button>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Increment</button>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| component | String | — | The name of the component that will be printed out. |
| props | Object | — | The component props that will be checked for changed values. |