# usePrevious

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

The usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.

## usePrevious

Quoting from the React documentation:

- If the value you need can be computed entirely from the current props or other state, remove that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.
- If you want to reset the entire component tree’s state, pass a different key to your component.
- If you can, update all the relevant state in the event handlers.

```jsx
function List({ items }) {
const [isReverse, setIsReverse] = useState(false);
const [selection, setSelection] = useState(null);

// Better: Adjust the state while rendering
const [prevItems, setPrevItems] = useState(items);
if (items !== prevItems) {
setPrevItems(items);
setSelection(null);
}
// ...
}
```

function

List

(

{ items }

)

{

const

[

,

]

=

useState

(

false

)

;

const

[

,

]

=

useState

(

null

)

;

// Better: Adjust the state while rendering

const

[

,

]

=

useState

(

)

;

if

(

!==

)

{

setPrevItems

(

)

;

setSelection

(

null

)

;

}

// ...

}

> Note: If you want to use this to update the internal state due to a prop change, you might run into a loop. Therefore, use the following snippet suggested by the React team here: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

### Example: Example 1

{ count: 1, previousCount: 1 }

#### React (tsx)

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

import usePrevious from '@rio-cloud/rio-uikit/usePrevious';
import NumberControl from '@rio-cloud/rio-uikit/NumberControl';

export default () => {
    const [count, setCount] = useState<number | undefined>(1);

    const previousCount = usePrevious(count);

    return (
        <div className='display-flex flex-wrap gap-20 align-items-center'>
            <NumberControl
                value={count}
                onChange={(value?: number) => setCount(value)}
                className='margin-0 width-100'
            />
            <div className='text-italic text-color-darker'>
                {`{ count: ${count}, previousCount: ${previousCount} }`}
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-wrap gap-20 align-items-center">
    <div class="NumberControl margin-0 width-100">
        <div class="input-group">
            <div class="form-control-feedback-wrapper">
                <input type="number" step="1" min="0" max="1.7976931348623157e+308" class="form-control no-controls padding-right-5" aria-label="number-input" value="1">
            </div>
            <div class="input-group-addon ">
                <div class="display-flex padding-left-10">
                    <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                        <div class="rioglyph rioglyph-minus scale-90">
                        </div>
                    </div>
                    <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                        <div class="rioglyph rioglyph-plus scale-90">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-italic text-color-darker">{ count: 1, previousCount: 1 }</div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| state | any | — | The value of the current state to keep track of. |
|  | any | — | Returns the previous value of the state to keep track of. |