Learn React Hooks

The usePrevious Hook

The usePrevious Hook is a simple Hook that lets us get the previous value of a prop or Hook value. It will always store and return the previous value of any given variable, and it works as follows:

1. First, we import the useState and usePrevious Hooks:

import React, { useState } from 'react'import { usePrevious } from 'react-hookedup'

2. Then, we define our App component, and a Hook in which we store the current count state:

export default function UsePrevious () {    const [ count, setCount ] = useState(0)

3. Now, we define the usePrevious Hook, passing the count value from the State Hook to it:

    const prevCount = usePrevious(count)

The usePrevious Hook works with any variable, including component props and values from other ...