use-previous

Returns previous value of given state

Source

Docs

Package

Usage

The use-previous hook stores the previous value of a state in a ref. It returns undefined on the initial render and the previous value of a state after rerender:

Enter some text here

Current value:

Previous value:

import { TextInput, Text } from '@mantine/core';
import { usePrevious, useInputState } from '@mantine/hooks';

function Demo() {
  const [value, setValue] = useInputState('');
  const previousValue = usePrevious(value);

  return (
    <div>
      <TextInput
        label="Enter some text here"
        placeholder="Enter some text here"
        id="previous-demo-input"
        value={value}
        onChange={setValue}
      />
      <Text mt="md">Current value: {value}</Text>
      <Text>Previous value: {previousValue}</Text>
    </div>
  );
}

Definition

function usePrevious<T>(value: T): T | undefined;

use-pagination

use-queue