Skip to main content

usePrevious()

The usePrevious() tracks and returns the previous value of a given input

Import​

import { usePrevious } from 'react-haiku';

Usage​

Current Value: 0

Previous Value: 0

import { usePrevious } from 'react-haiku';

export const Component = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  function handleIncrement() {
    setCount(prev => prev + 1)
  }

  function handleDecrement() {
    setCount(prev => prev - 1)
  }

  return (
    <div>
      <h3>Current Value: {count}</h3>
      <h3>Previous Value: {prevCount}</h3>

      <div>
        <button onClick={handleIncrement}>
          Increment
        </button>
        <button onClick={handleDecrement}>
          Decrement
        </button>
      </div>
    </div>
  );
}

API​

Arguments​

  • value - The new value to track and return the previous of