INTRO ๐
Hello World! ๐
Today we are discussing another custom hook ๐ช named useCounter
๐ฅ. In this post, we will discuss useCounter
๐ฅ hook code and use case.
USAGE ๐
Sometimes in Frontend development, we need to use count down
or counter
or time
. That counter may have some restrictions like no need to update on refreshing the page i.e. If the counter starts with 30 and decreases one by one with one one-second interval, It should not start from 30 again after refreshing the page. ๐๐ปSession Storage๐๐ป is a beautiful property in a browser that will help us to overcome this problem. Let's look deep into the code ๐.
CODE ๐
import { useEffect, useState } from 'react';
export const useCounter = (inititalCounter = 30, sessionName = 'count_timer') => {
const [counter, setCounter] = useState('');
useEffect(() => {
const value = sessionStorage.getItem(sessionName);
if (value) {
setCounter(value);
} else {
sessionStorage.setItem(sessionName, inititalCounter);
setCounter(inititalCounter)
}
}, []);
useEffect(() => {
const interval = setInterval(() => {
setCounter(prev => prev - 1);
}, 1000);
return () => {
clearInterval(interval);
};
}, []);
useEffect(() => {
return () => {
if (counter < 1) {
sessionStorage.setItem(sessionName, inititalCounter);
} else {
sessionStorage.setItem(sessionName, counter - 1);
}
};
}, [counter]);
const handleReset = () => {
setCounter(inititalCounter + 1);
};
return [counter > inititalCounter ? inititalCounter : counter, handleReset];
};
USE CASE
import React from "react";
import { useCounter } from "./useCounter";
function App() {
const [counter, handleReset] = useCounter(30);
return (
<div>
{counter}
<button onClick={handleReset}>reset</button>
</div>
);
}
export default App;
CONCLUSION ๐
I hope this post is helpful ๐ and helps to use a counter in frontend development ๐ง๐ปโ๐ป. We will meet with another hook in the next post.
Peace ๐
Top comments (0)