React usePrevious Hook
Hooks are essential for the functional component pattern in React. One frequent logic comparison with class components was comparing a previous prop value with a current prop value via lifecycle methods. So what's an easy pattern for duplicating previous value comparisons in functional components?
The useRef and useEffect hooks allow us manage that same functionality in functional components via a custom hook -- usePrevious:
import { useEffect, useRef } from 'react';
export function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
// Usage
export function MyComponent(props) {
const { name } = props;
const previousName = usePrevious(name);
if(name != previousName) {
// Do something
}
}
I love this usePrevious hook, if only because I frequently forget to use the .current property and it helps avoid some boilerplate code. What are your thoughts on this pattern? Do you have any custom hooks you rely on?
Hi, I think the
useEffect()is not necessary:export function usePrevious(value) { const ref = useRef(); const prev = ref.current; ref.current = value; return prev; }The docs say not to set a ref during a render due to instability, useEffect ensures it runs after the render
This and more are available in the excellent ahooks package: https://ahooks.js.org/hooks/state/use-previous.
useLocalStorage. The one hook that I use a lot. Persisting filters of a table, search inputs, makes everything easy.