usePrevious

The value a prop or state held before it last changed.

HooksState@gaudi/design-system/hooks/state/use-previousView in Storybook Source

For "went up / went down" indicators, transition direction and change detection. Tracked in state, so it is safe under concurrent rendering, and unchanged re-renders keep the same previous value.

Usage

import { usePrevious } from '@gaudi/design-system/hooks';
const previous = usePrevious(count);const trend = previous === undefined ? 'flat' : count > previous ? 'up' : 'down';

Examples

Change since the last value

Storybook

API

2 options

1 return value

Accessibility

When a change direction is shown with colour or an arrow, also state it in text ("up 12%").

Notes

Comparison uses Object.is; pass primitives or stable objects.

useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.