0.0.2 • Published 9 months ago
@kelley-sharp/react-hooks v0.0.2
React Hooks
This package contains a set of my favorite custom React hooks that I use on nearly every project. The only dependency is React.
Hooks
usePrevious
This is a hook that caches the value of anything you want on the previous render. It is helpful to determine when something changed what the exact value was on the most recent render.
function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
useEffect(() => {
if (count - prevCount > 1) {
console.log("You just jumped the count by more than 1 at a time!");
}
}, [count, prevCount]);
}
useDidChange
This hook will take any value and determine whether it has changed since the last render. It returns true
if the value is different.
For objects, it uses the JSON.stringify
method for simple comparisons.
function ToggleSwitch() {
const [toggled, setToggled] = useState(false);
const wasToggled = useDidChange(toggled);
useEffect(() => {
if (wasToggled){
console.log("the switch was toggled between the previous and current render");
}
}, [toggled, wasToggled]);
}