usePrevious
Track the previous value of a variable with usePrevious.
Install:
npm i @uidotdev/usehooks
Description:
The usePrevious hook is a useful tool for tracking the previous value of a variable in a functional component. This can be particularly handy in scenarios where it is necessary to compare the current value with the previous one, such as triggering actions or rendering based on changes.
Parameters
| Name | Type | Description |
|---|---|---|
| newValue | any | The new value to track and return the previous of. |
Return Value
| Name | Type | Description |
|---|---|---|
| previousValue | any | The previous value of the provided newValue. |
Demo:
Example:
import * as React from "react";
import { usePrevious } from "@uidotdev/usehooks";
function getRandomColor() {
const colors = ["green", "blue", "purple", "red", "pink"];
return colors[Math.floor(Math.random() * colors.length)];
}
export default function App() {
const [color, setColor] = React.useState(getRandomColor());
const previousColor = usePrevious(color);
const handleClick = () => {
function getNewColor() {
const newColor = getRandomColor();
if (color === newColor) {
getNewColor();
} else {
setColor(newColor);
}
}
getNewColor();
};
return (
<section>
<h1>usePrevious</h1>
<button className="link" onClick={handleClick}>
Next
</button>
<article>
<figure>
<p style={{ background: `var(--${previousColor})` }} />
<figcaption>Previous: {previousColor}</figcaption>
</figure>
<figure>
<p style={{ background: `var(--${color})` }} />
<figcaption>Current: {color}</figcaption>
</figure>
</article>
</section>
);
}