React Custom Hooks (useCounter)

sundarbadagala081

sundarbadagala

Posted on April 30, 2024

React Custom Hooks (useCounter)

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];
};
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 πŸ™‚

πŸ’– πŸ’ͺ πŸ™… 🚩
sundarbadagala081
sundarbadagala

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