usePreviousValue

@coinbase/cds-common@8.34.1

Returns the previous value of a given variable, useful for comparing current and previous states in effects or for tracking changes over time.

Import

import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue'

SourceView source code

---

󰏖

View as Markdown

---

Basic usage

Loading...

󰙡

Live Code

function Example() {
  const [count, setCount] = useState(0);
  const previousCount = usePreviousValue(count);

  return (
    <VStack gap={3} alignItems="start">
      <VStack gap={1}>
        <Text font="headline">Current count: {count}</Text>
        <Text font="headline">Previous count: {previousCount ?? 'None'}</Text>
      </VStack>
      <Button onClick={() => setCount(count + 1)}>Increment</Button>
    </VStack>
  );
}

---

With Complex Values

Loading...

󰙡

Live Code

function Example() {
  const [user, setUser] = useState({ name: 'John', age: 25 });
  const previousUser = usePreviousValue(user);

  const updateAge = () => {
    setUser((prev) => ({ ...prev, age: prev.age + 1 }));
  };

  return (
    <VStack gap={3} alignItems="start">
      <VStack gap={1}>
        <Text font="headline">Name: {user.name}</Text>
        <Text font="headline">Age: {user.age}</Text>
        <Text font="headline">Previous age: {previousUser?.age ?? 'None'}</Text>
      </VStack>
      <Button onClick={updateAge}>Add Year</Button>
    </VStack>
  );
}