In React, you don’t have access to the previous render’s value. This is usually fine, but once in a while I find myself needing to access the previous values of a state for diverse reasons (e.g. recording analytics event on certain behaviours).
In that case, I use a custom hook called usePreviousValue:
import { useEffect, useRef } from 'react'
export default function usePreviousValue(value) {
const ref = useRef()
useEffect(() => {
ref.current = value
})
return ref.current
}
It can be used this way:
const previousCount = usePreviousValue(count)
useEffect(() => {
if (previousCount && previousCount > count) {
analytics.trackEvent('count-decreased')
}
}, [previousCount, count])
Tim Alby
I'm a software engineer working freelance as a full-stack web developer. My most common languages are PostgreSQL, Node, Rails and React.