mirror of
https://github.com/streamich/react-use.git
synced 2025-12-08 18:02:14 +00:00
1.4 KiB
1.4 KiB
usePreviousDistinct
Just like usePrevious but it will only update once the value actually changes. This is important when other
hooks are involved and you aren't just interested in the previous props version, but want to know the previous
distinct value
Usage
import {usePreviousDistinct, useCounter} from 'react-use';
const Demo = () => {
const [count, { inc: relatedInc }] = useCounter(0);
const [unrelatedCount, { inc }] = useCounter(0);
const prevCount = usePreviousDistinct(count);
return (
<p>
Now: {count}, before: {prevCount}
<button onClick={() => relatedInc()}>Increment</button>
Unrelated: {unrelatedCount}
<button onClick={() => inc()}>Increment Unrelated</button>
</p>
);
};
You can also provide a way of identifying the value as unique. By default, a strict equals is used.
import {usePreviousDistinct} from 'react-use';
const Demo = () => {
const [str, setStr] = React.useState("something_lowercase");
const [unrelatedCount] = React.useState(0);
const prevStr = usePreviousDistinct(str, (prev, next) => (prev && prev.toUpperCase()) === next.toUpperCase());
return (
<p>
Now: {count}, before: {prevCount}
Unrelated: {unrelatedCount}
</p>
);
};
Reference
const prevState = usePreviousDistinct = <T>(state: T, compare?: (prev: T | undefined, next: T) => boolean): T;