teleren/devto huggingface dataset:
React Custom Hooks (useLocal)
Tags: webdev, javascript, programming, beginners
Published: 2024-04-30 17:52:43

## INTRO 🔔
Hello World! 👋
Today we are discussing another custom hook named `useLocal`🔥. 

> Note📌 : Technically this one can't be considered as a hook 🙃 because as per the custom hook definition `If we create one function using react hooks then it is called a Custom Hook` 🙂. But in this code, we are not using any react hooks 😕. So we can't call it a custom hook 😟 but for our convenience, we are now considering it as a custom hook 😉.

## USAGE 🔔
If you are a `Frontend Developer`🧑🏻‍💻, you must know the [Local Storage📦](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) & [Session Storage📦](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage). These are browser properties that help to store and access the data in sessions. 

Every time using local storage for getting data as `localStorage.getItem('item')` and for setting data as `localStorage.setItem('item', data)` is very lengthy and it is not readable. To overcome this problem, we created one helper(custom hook) called `useLocal` (particularly for localStorage)

## CODE 🔔
```js
export const useLocal = (itemName) => {
  const setLocal = (data) => {
    localStorage.setItem(itemName, JSON.stringify(data));
  };
  const getLocal = () => {
    return JSON.parse(localStorage.getItem(itemName));
  };
  const removeLocal = () => {
    localStorage.removeItem(itemName);
  };

  return [setLocal, getLocal, removeLocal];
}
```

## USE CASE 🔔
```jsx
import React, { useEffect } from "react";
import { useLocal } from "./useLocal";

function Index() {
  const [setLocal, geLocal, removeLocal] = useLocal("app_token");

  useEffect(() => {

    setLocal("k8axga83alf991z90a9a0aaf1");

    return () => removeLocal();
  }, []);

  const handleGet = () => {
    const token = geLocal();
    console.log(token);
  };

  return (
    <div>
      <button onClick={handleGet}>Get Token</button>
    </div>
  );
}

export default Index;
```

## CONCLUSION 🔔
By using the same method we can create a custom hook for Session Storage also. 

I hope this post gives you some information. We will meet in next post with another new custom hook.

Peace 🙂
릴나라
Published: 2024-04-30 17:47:12

메이저 릴게임사이트 가입 방법
항상 사고 없는 릴게임 업계를 위해 노력하고 있는 검증업체 릴나라입니다.
온라인 사설 릴게임사이트 를 통해 릴게임 을 즐기는 분들이라면 누구나 조작 가능성 의 존재에 대해 인지하고 있으며, 여러 모로 신경을 쓰고 있을 것입니다.

먹튀사이트 는 현재 사설 릴게임사이트 의 90% 이상에 해당이 될만큼 공공연하게 자리를 잡고 있는 상황이라 최근에는 많은 피해 사례들이 저희 커뮤니티를 통해 공개되고 있습니다.
이러한 사이트의 악행을 막기 위해 저희 릴나라를 더불어 많은 검증사이트들
이 생겨나고 커뮤니티를 통해 안전한 릴게임사이트 를 이용하는 방법에 대한 노하우들을 공유하고 있는 상황입니다.

메이저 릴게임사이트 가입 방법
이들은 자신만의 이익을 위해 피해자들의 금전을 갈취하고, 농락하는 행위들을 일삼아 하고 있습니다.
이러한 불필요한 업체들은 하루 빨리 소멸이 되어야 하지만, 현재 상황으로는 수많은 릴게임사이트 들이 신규로 개설이 되고있는 만큼 모두 잡아내기란 쉽지 않게 되었습니다.
**_[릴나라](https://reelnara.com/)_**
저희 또한 여러분들의 즐겁고 안전하게 게임을 위해 하루를 쉬지 않고 많은 먹튀사이트 를 검거하고 업계에서 퇴출을 시키기 위한 노력을 하고 있지만, 이 들은 교묘하고 악렬하게 수법을 바꾸고, 끝까지 살아 남기 위해 항상 진화된 방법들을 고안해내고 있습니다.
안전놀이터 의 옆에서 피를 빨아 먹는 기생충과 같은 역할을 하고 있다해도 과언이 아닐 것입니다.

정말 최근에는 생각지도 못한 방법들에 이용자분들께서 속수무책으로 당하는 경우도 많이 있습니다.
이러한 지능적인 범죄 행위에 맞서기 위해 이용자분들은 반드시 릴게임사이트 중에서도 릴나라 만을 이용하는 것이 좋을 것입니다.
열심히 노력하여 얻은 당첨금인 만큼 허무하게 날려버리게 되면 릴게임 에 대한 의욕도 떨어지고, 다시는 내가 좋아하는 릴게임 을 하기 두려워 지기 때문입니다.

그렇다면 여러분들께서 국내 가장 안전한 메이저급의 릴게임사이트 를 가입하기 위해서는 어떻게 해야할까요?
이는 누구나 어렵지 않은 방법으로 찾을 수 있습니다.

메이저 릴게임사이트 를 고를 수 있는 방법 3가지
1. 비교적 최근에 등록된 메이저급 릴게임사이트 를 이용하자
메이저급 릴게임사이트 와 먹튀 를 일삼는 먹튀사이트 들의 대한 구별법은 매우 여러가지가 존재할 것 입니다.
그 중 릴나라 에서 중요하게 보고 있는 요소는 바로 사이트 내의 환전 수준과 자체 보안력에 관한 것입니다.

저희 업체를 포함한 수 많은 검증 업체들은 우선적으로 이러한 환전수준과 보안성에 대해 철저하게 파악을 하려고 합니다.
그 이유는 사이트 내의 환전 수준이 부족하게 되면 사이트 운영에 있어 매우 어려움을 겪게 될 것이고 이는 즉시 먹튀 의 행위로 넘어갈 수 있는 여지가 마련되게 됩니다.

또한 그만큼 자본력이 부족하다라고 하는 사이트는 내가 당첨이 되더라도 이용자들에게 현금을 건네줄 여력이 없음을 뜻하기 때문에 매우 중요하게 보고 있습니다.

2. 보안 능력이 좋은 릴게임사이트 선택하자
더불어 보안력을 중요하게 보는 이유는 릴게임사이트 의 해킹과 디도스 공격때문입니다.
아무리 현금유동성이 뛰어나고 큰 자본력을 갖추고 있다 하더라도 해킹과 디도스 공격이 난무하게 벌어지는 이 업계에서는 절대적으로 릴게임사이트 내 보안력은 필수적으로 갖추어야 할 필수 덕목입니다.

이런 부분들이 부족하게 된다면 하루 아침에 릴게임사이트 가 폭파되거나 내가 입금한 금액 및 당첨 금액들을 허무하게 날릴 수 있기 때문에 각별히 신경을 써야 될 부분 중 하나입니다.
간혹 우리가 릴게임사이트 를 이용하다 보면 해당 사이트의 접속시 불법 유해정보 사이트라는 안내문이 적혀 진입이 불가능한 경우를 많이 보셨을 것입니다.

이는 보안이 철저하게 되어 있지 않아 접속이 막히고, 사이트가 폭파 된 것입니다.
그래서 많은 회원들이 사용하는 메이저급 릴게임사이트 에서는 회원 가입부터 까다롭게 진행이 되고 있는 것입니다.
자동 가입 방지시스템도 이에 속할 것이며, 보안 숫자 입력 , 인증절차 등 다양한 단계들은 사이트의 보안수준을 매우 높여주는 기능들입니다.

따라서 먹튀 를 확실하게 피하고 안전하게 이용하기 위해서는 이러한 검증된 안전 인증업체를 이용하시는 것이 좋으며, 되도록이면 최신 업데이트가 자주 일어 나는 곳을 선택하시는 것이 현명 할 것입니다.
물론 이러한 부분들이 100% 먹튀 를 피하는 완벽한 예방법이라고는 말씀드리진 못하나, 이러한 큰 비용을 투자해서 도입을 했다라는 것은 먹튀사이트 에서는 절대 행할 수 없는 것들이니, 보편적으로 많은 먹튀사이트를 사전에 방지 할 수 있을 것입니다.

3. 메이저 릴게임사이트 이용하자
마지막으로 제목에도 나와 있지만 최근에 등록된 메이저급 릴게임사이트 를 이용하는 것도 우리가 안전한 릴게임 을 이용하는 방법 중 하나입니다.
위에서 언급된 구별법들이 검증이 되어야지만, 메이저급 릴게임사이트 로 등록이 가능한데 상위에 노출된 업체들은 비교적 다른 등록된 업체들 보다 최근인증절차가 이루어진 곳이다 보니 안전하다고 말씀드릴 수 있는 것입니다.

억욱하게 먹튀 를 당하는 피해자들의 대부분은 허위 광고에 속거나, 지나친 이벤트, 혜택, 프로모션에 속은 경우가 많습니다.
이는 언제 어디서 먹튀 를 당하더라도 전혀 이상하지 않는 업체입니다.
이러한 업체들에 속아 뒤늦게 제보를 하거나 신고를 해도 릴게임사이트 의 먹튀 사건만 알려질 뿐 우리가 피해 받은 금액을 보상받기란 쉽지가 않을 것입니다.

이처럼 절대 과도한 이벤트를 일삼는 사이트들에 가입은 하지 말아야 할 것이며, 최근 인증을 걸친 상위 메이저급 릴게임사이트 들을 이용하는 것이 우리가 안전한 게임을 함에 있어 많음 도움을 줄 것입니다.
혹시 만약 검증 결과가 불확실한 곳을 발견하거나, 회원 가입 인증절차에 대해 미비한 곳이 있다면 저희 릴나라을 통해 즉시 제보하여 문의 주시길 바랍니다.
Use stateless services
Tags: ruby, rails, services
Published: 2024-04-30 17:41:13

---
title: Use stateless services 
published: true
description: 
tags: Ruby,Rails,services
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-23 11:38 +0000
---

This post is a response (comment, really) to [Tim Riley's 2017 presentation on functional architecture](https://www.youtube.com/watch?v=7qnsRejCyEQ), specifically, how to write truly stateless and functional services.

## The bad example from him
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aju1gqr8tc3pv0rkh0ce.png)

This approach allows re-using the service object.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aybpytf4uyoda3utx8u.png)

I believe the ability to do so is a negative, but even if you disagree, I will show how the reuse comes at too high a cost:
1. The API becomes dispersed, some stuff in init, some in call. Where do I put a new parameter?
2. Memoisation becomes impossible.
3. Extract-method refactoring becomes cumbersome to impracticality because we have to pass everything as arguments.
```rb
def call(feed)
  # something very long
end

private
                  
def split_out_of_call(feed)
end

def other_split(download_feed, some_loop_arg)
end
```

## The alternative
Let's lean into the functional aspect of a service, and disallow instantiation! This will remove the ability to reuse (an actual win in my book, YMMW), and allow us to use private instances as full black boxes:

```rb
class ImportProducts
  def self.call(...)
    new(...).call
  end
  
  # This is key. *Everything* about the instance is private.
  private  
  
  attr_reader :download_feed, :products_repo, :feed:
  
  # yes, even the initializer is private 
  def initialize(download_feed:, products_repo:, feed:)
    @download_feed = download_feed
    @products_repo = products_repo
    @feed = feed
  end
  
  # no params for #call
  def call
    # ...
  end

  def split_out_of_call
    # #feed implicitly available
  end

  def other_split(some_loop_arg)
    # #download_feed implicitly available
  end 
end
```

And now in action
```rb
ImportProducts.(
  download_feed: download,
  products_repo: repo,
  feed: books_feed
)
```

This way there is never an instance which might get some `@errors` populated to be accessed later. Everything needs to be in the `#call` return value, often a hash, but ideally a Struct.
Day 30/366
Tags: 1percentplusplus, 100daysofcode
Published: 2024-04-30 17:34:47

🚀 **Today's Learning:**

🌟 DSA

- Given an array of elements, find the count of elements that are binary searchable
- Selection sort

🌟 Dev

- Async await

🔍 **Some Key Highlights:**

DSA

To find the count of elements that are binary searchable in an array, iterate through each element and check if it's greater than all elements to its left and less than all elements to its right. If so, increment the count. Finally, return the count. This process emulates the property of elements in a binary search tree where each node is greater than all nodes in its left subtree and less than all nodes in its right subtree.

Selection sort is a simple sorting algorithm where the array is iterated repeatedly. In each iteration, the smallest element from the unsorted part of the array is selected and swapped with the first unsorted element. This process continues until the entire array is sorted. It's called selection sort because it repeatedly selects the smallest (or largest, depending on the sorting order) element and places it in its final position.

DEV

Async/await is a modern approach in JavaScript for handling asynchronous operations in a more synchronous-like manner. When a function is marked as `async`, it means it will always return a promise. Within an async function, the `await` keyword is used to pause the execution of the function until a promise is resolved, allowing other code to run in the meantime. This makes asynchronous code easier to read and write, resembling synchronous code structures. Async/await simplifies asynchronous programming by avoiding the need for chaining promises or using callbacks, leading to cleaner and more maintainable code.

 #100daysofcode #1percentplusplus #coding #dsa
Solar powered Quadcopter
Published: 2024-04-30 17:30:24


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98waq7w9stg32wiu8px7.jpg)[](
![Designed UAV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epv0bv7pqkiujjvik9nk.jpg))In recent years, technological advancements have played a crucial role in the process of globalization, with drones emerging as a versatile tool across various sectors, including agriculture. This paper presents a project developed at Mbarara University of Science and Technology aimed at addressing the need for affordable and efficient drone technology tailored for agricultural applications.
The project involved the implementation of a solar-powered quadcopter drone, also known as an unmanned aerial vehicle (UAV), equipped with hybrid aerodynamic systems for navigation and data collection. Employing agile techniques, the project emphasized iterative development, teamwork, and adaptability to evolving requirements.
A generic drone architecture was developed based on open-source hardware platforms, specifically the CC3D atom and Arduino Uno. The software stack utilized LibrePilot, an open-source suite for multicopter control, extended to support the designed architecture, along with Arduino IDE for additional functionality.
Controlled via a 2.4GHz wireless transmitter and receiver through a graphical user interface (GUI), the quadcopter implemented a PID control system to enhance stability and performance during flight. Processing signals through powerful high-speed programmable CC3D and Arduino Uno controller boards further optimized efficiency and effectiveness.
The resulting system integrated software control and navigation algorithms with hardware features, including brushless motors, solar power, and image systems. This combination provided farmers with valuable insights into crop health and environmental conditions through image capturing and transmission capabilities.
In conclusion, the project yielded a flexible drone solution capable of fulfilling diverse agricultural requirements, thereby empowering farmers with actionable data for informed decision-making. 
NAMAKULA JANET
OKOCI SAMUEL PETER
Elanat CMS 2.2, File Manager Component is Compatible with .NET Core
Tags: csharp, dotnet, cms, github
Published: 2024-04-30 17:25:17

As you know, [Elanat CMS](https://github.com/elanatframework/Elanat) is a content management system that has migrated from .NET Standard to .NET Core. In [Elanat CMS](https://elanat.net), some things are still remembered from the .NET standard; it is interesting to note that the `App_Data` directory still exists in Elanat CMS!

> Note: In .NET standard, the path of all files and directories related to the client was the same as the path of the program directory; but in .NET Core, all the files and directories related to the client are added in the wwwroot directory.

In the near future, version 2.2 of the Elanat content management system will be released. In this version, we applied modifications in the file manager component; we at Elanat team have taken the `wwwroot` directory a step back so that Elanat users can manage the `code_behind` directory and DLLs and other application files and directories.

**File manager component version 2.2 and earlier**

![File manager component version 2.2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuxt4q7wylvfwr5rweis.png)

The above image is related to the previous versions of the Elanat CMS file manager component, where the `wwwroot` directory is considered root and it is not possible to return to the program directory.

**File manager component version 2.2 and later**

![File manager component version 2.2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yynw5zqrvaft2vlqi25t.png)

The image above shows the file manager component of Elanat CMS (from version 2.2 and later) which considers the directory where the application is located to be root.

### Related links

Elanat CMS on GitHub:
https://github.com/elanatframework/Elanat

Elanat CMS website:
https://elanat.net

CodeBehind on GitHub:
https://github.com/elanatframework/Code_behind

CodeBehind in NuGet:
https://www.nuget.org/packages/CodeBehind/

CodeBehind page:
https://elanat.net/page_content/code_behind
MVA Physiotherapy: Your Path to Healing After a Car Accident
Tags: physiotherapyedmonton, physiotherapy
Published: 2024-04-30 17:23:51


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmovcqbg2r1pqufduiy0.jpg)
In bustling Edmonton, motor vehicle accidents can leave individuals facing various physical challenges, necessitating timely support for recovery. Motor Vehicle Accident Physiotherapy in Edmonton offers specialized services tailored to address post-accident issues, from minor discomfort to severe trauma. Our team ensures personalized care to facilitate optimal healing and return to normal activities. Contact us today to embark on your recovery journey with Next Step Physiotherapy in Edmonton.
**[https://tinyurl.com/2ppf92vf](https://tinyurl.com/2ppf92vf)**  587-853-0878
#Physiotherapy #Recovery #MotorVehicleAccidents #PhysiotherapyEdmonton #NextstepPhysiotherapy #MotorVehicleAccidentPhysiotherapy #MotorVehicleAccidentPhysiotherapyEdmonton #PhysicalTherapyAfterCarAccident
#MVAPhysiotherapy #PhysicalTherapyAfterCarCrash #MVAPhysio #NextStepPhysiotherapyEdmonton #PhysiotherapyEdmonton
Mastering the Art of Prompt Engineering for AI - Day 1
Tags: ai, promptengineering, llm, programming
Published: 2024-04-30 17:21:58

## 🚀 Check Out My YouTube Channel! 🚀
Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak). I post practical full-stack development videos that complement my blog posts. Your support means a lot!

**Introduction:**
In the burgeoning world of artificial intelligence (AI), particularly in natural language processing (NLP), the way we interact with AI systems can drastically shape the outcomes we receive. This interaction is largely governed by what we call "prompt engineering." Let's dive into the basics of crafting effective prompts to enhance our interactions with AI.

**Day 1: Understanding Prompt Engineering**

**What is Prompt Engineering?**
Prompt engineering is both an art and a science—it involves crafting inputs (prompts) that guide AI, especially language models, to produce desired outcomes. At its core, prompt engineering requires a deep understanding of how a model interprets inputs and how to structure those inputs to achieve specific results.

**Why is Prompt Engineering Important?**
As AI becomes more integrated into our daily tasks, the ability to effectively communicate with these systems becomes crucial. Whether it's refining a search query, interacting with a chatbot, or generating complex data analysis, the quality of your prompts determines the quality of the AI's response.

**Exercise: Simple Prompt Creation**
To grasp the impact of prompt engineering, let's start with a practical exercise:

1. **Choose a Topic:** Pick something you're curious about or need assistance with. It could be anything from cooking to coding.
   
2. **Craft Your Prompt:** Write a simple question or command related to your chosen topic. For example, if you’re interested in cooking, your prompt might be, "What are some quick and healthy dinner recipes?"

3. **Observe the Outcome:** Share your prompt here or with an AI tool, and observe how precisely the AI responds to your query.

**Learning from the Exercise:**
This exercise will help you see how directly the formulation of your question affects the AI's ability to deliver relevant and accurate information. A well-crafted prompt leads to a more useful response, highlighting the critical role of your input's clarity and specificity.

**Conclusion:**
Understanding and applying the principles of prompt engineering can significantly enhance your efficiency and effectiveness in using AI tools. It’s a skill that, once honed, can provide you with better control over the technology at your fingertips.

**Call to Action:**
Try crafting your own prompts and see how different formulations affect the responses you get. Share your experiences and discoveries in the comments below—let's learn from each other's insights and continue to refine our approach to interacting with AI.
Inside GmOwl: A Guide to Quiz Functionality
Tags: java, sql, tools, beginners
Published: 2024-04-30 17:18:07

<p>GmOwl is a solution that offers an organized and engaging learning platform. It was developed to cater to the increasing need, for learning tools providing a versatile quiz environment that meets users requirements.</p>
<p>The main objective of GmOwl is to deliver an user experience for individuals participating in quizzes while giving administrators comprehensive control, over content and user engagement.</p>
<p>GmOwl uses Java EE with MVC template, and the InterSystems IRIS database is used to store data. The InterSystems JDBC Driver is used to connect to the database.</p>
<p>This article intends to examine the features and principles of GmOwl.</p>
<h3>Basic Features</h3>
<p>Like most web applications, this one is no exception and has a basic set of functions: registration, authorization, home and profile pages. So, to access the site's functionality, you need to register and log in. After that, you can start taking tests.</p>
<h3>Quiz Features</h3>
<h4>Taking a quiz</h4>
<p>Once the quiz is started, the user can select answers and save the answers.</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqm61cmzvq5nyrvojgb4.png)
<h4>Viewing the quiz results</h4>
<p>After taking the quiz, users can see their own results. They can also be viewed in the user's profile in the future.</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku21xlc7d7tm5cv3e3sr.png)
<h3>Admin Features</h3>
<p>Administrator can manage (edit/block/unblock/delete) all user accounts. But the most important thing is that the administrator can add and manage new quizzes. So let's take a closer look at it.</p>
<h4>Adding New Quiz</h4>
<p>The administrator can enter such information for new quiz as: name, subject, select difficulty (easy, normal, hard) and duration in minutes.</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w351lm9e9jhwlxzd24nj.png)
<h4>Adding Questions</h4>
<p>After quiz creation an administrator can add questions to it. The question consists of a text and answers (from 2 to 4).</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3km1vpgfwffcjlbtdhen.png)
<h4>Changing the Status of Quiz</h4>
<p>When the administrator has finished adding questions to the quiz and wants to publish it, they need to change the status to desired.</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykzubt8t1n65r88v3spg.png)
<h3>Database Diagram</h3>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xtesxe9fx1j9saqw2y7.png)
React, Vue or Angular
Published: 2024-04-30 17:13:55

---
title: React, Vue or Angular
published: true
description: Deciding the best framework to use in 2024
tags: 
cover_image: https://i.postimg.cc/HLL96R63/1696151793114.png
---
React, Vue and Angular has been used to build robust web applications and mobile apps and sometimes when it comes to making decisions based on which platform to use can be challenging. So, let's have a pool. What is your preferred web development libraries. 

React, Angular or Vue?


For me it's surely, React plus Typescript and NextJs. After going through this free course on [Udemy](https://www.udemy.com/course/all-in-one-beginners-guide-to-typescript-react-nextjs/?couponCode=4E12528314), i have been creating amazing ReactJs application.
React Custom Hooks (useCounter)
Tags: webdev, javascript, programming, beginners
Published: 2024-04-30 17:08:22

## 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👈🏻](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) is a beautiful property in a browser that will help us to overcome this problem. Let's look deep into the code 🚀.

## CODE 🔔
```js
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
```jsx
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 🙂