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?
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...
One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here's a quick MooTools code snippet that...
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