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)