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?
![9 Mind-Blowing Canvas Demos]()
The <canvas>
element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![MooTools Gone Wild: Element Flashing]()
If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...
![Input Incrementer and Decrementer with MooTools]()
Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...
Hi, I think the
useEffect()
is not necessary: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.
I’d recommend changing the example to use a property other than “name” as it makes it confusing to someone trying to understand why you pass in a name and expect a value.
A simple yet very useful hook! It saves time and helps avoid boilerplate code.
I’m not so sure this would work as expected. On the first render after a value change, the hook will correctly show the old value. But if the component re-renders for any reason, even if that value hasn’t changed, it will now show the current value. I suppose this is more like
useValueFromPreviousRender(value)
.Here’s an example – you can change the input text and see the previous value, but if you trigger a re-render with the button you’ll see the value update to the current text value: https://playcode.io/1668602