Guide
Reference
Roadmap
Guide
Reference
Roadmap

usePrevious

Tags:
State

A React Hook that retains the different value of the state from the last render.

Scenes

  • Track the previous state: Used to record the changes in the state, so that related operations can be performed in the next render.
  • ...

Demo

Source
CurCount:
0
PreCount:
undefined
PrePreCount:
undefined
PrePrePreCount:
undefined
Count:
0
undefinedundefinedundefinedundefinedundefinedundefined

Usage

const prevState = usePrevious(state)

// When the state changes from 1 to 2, the value of prevState will be 1

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const previous = usePrevious(state, options)

State

The state of which you wish to retain the previous value, can be any valid JavaScript type.

Options

interface UsePreviousOptions {
  /**
   * An `isEqual` function used to compare whether the previous value is equal to the current value, defaults to `Object.is`.
   *
   * @param previous The previous value.
   * @param current The current value.
   * @returns Returns `true` if equal, otherwise returns `false`.
   *
   * @defaultValue `Object.is`
   */
  isEqual?(previous: any, current: any): boolean
  /**
   * Whether to compare deeply, defaults to `false`.
   *
   * @defaultValue false
   */
  deep?: boolean
}

if deep is true, isEqual will be ignored and the built-in deep comparison strategy will be used instead.

Returns

The different value of the state from the last render.