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?
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![Reverse Element Order with CSS Flexbox]()
CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible. Semantics...
![Google Font API]()
Google recently debuted a new web service called the Font API. Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website. Let's take a quick look at the ways by which the Google Font...
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