usePrevious

The usePrevious hook is helpful when you want to keep track of the previous value of a variable. This comes in handy when you need to compare the new and previous value to trigger an action.

usePrevious

Previous Value: -1

Current Value: 0

Increment by 1Decrement by 1

Usage

Import the hook from @abhushanaj/react-hooks and use in required component.

./src/App.tsx

import React from 'react';
import { usePrevious } from '@abhushanaj/react-hooks';

function App() {
  const [count, setCount] = React.useState(0);

  // previousValue on first render will be -1,  as default value is passed
  const previousValue = usePrevious(count, -1);

  return (
    <div>
      <p>Previous Value: {previousValue}</p>
      <p>Current Value: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment by 1</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement by 1</button>
    </div>
  );
}

export default App;

If no second argument is passed to the usePrevious hook, then on the first render it will return undefined

./src/App.tsx

function App() {
  const [count, setCount] = React.useState(0);

  // previousValue on first render will be undefined, as no default value is passed
  const previousValue = usePrevious(count);

  return (
    <div>
      <p>Previous Value: {previousValue}</p>
      <p>Current Value: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment by 1</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement by 1</button>
    </div>
  );
}

export default App;

API Reference

Parameters

Parameter	Type	Description	Default
value	T	The variable to keep track of.	N/A
defaultValue	U (optional)	The default value for the first render.	undefined

Return Value

Parameter	Type	Description	Default
previousValue	R	The previous value of the value T.	undefined

Types Reference

1. T: extends unknown
2. U : extends T | undefined
3. R: U extends T ? T : undefined