React Custom Hooks (useCounter)
sundarbadagala
Posted on April 30, 2024
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 π
Posted on April 30, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024