React Custom Hooks (useCounter)

#webdev #programming #javascript #beginners

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;