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?
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest
, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![CSS Transforms]()
CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements. One or more transformations can be applied to a given element and transforms can even be animated...
![Element Position Swapping Using MooTools 1.2]()
We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method.
MooTools 1.2 Implementation
MooTools 1.2 Usage
To call the swap...
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