Skip to content

thekinv21/useful-custom-hooks

Repository files navigation

What is this Custom Hooks ?

A Custom Hook is actually a comprehensive JavaScript and Typescript function and can contain other functions. Their names usually start with ‘use’. What are the advantages of creating a Custom Hook? Firstly, they abstract the logical functions that repeat in ReactJS or NextJS components and make them reusable. This makes your code cleaner and more organised. Also, custom Hooks allow you to share logical functions between different components. For example, if you want to use the same network status control in different components, you can abstract this function as a custom Hook and reuse it in each component

1) useCustomDebounce

useCustomDebounce is a custom Hook commonly used in React. This Hook helps to delay functions or status updates for a certain period of time. It is especially useful in scenarios such as network requests.

useDebounce

Example:

usedebounce and useState combine

2) useCustomState

useState, React’te yaygın olarak kullanılan bir özel Hook’tur. Bu Hook, bileşenlerin durumu yönetmek için kullanılır. Durum, bileşenlerin içindeki verilerin değişebilirliğini temsil eder

useState

Example:

usedebounce and useState combine

3) useCustomRefetch

The concept of refetch in React Query is a feature used to re-pull data

useRefetch

Example:

refetch example

4) useCustomLocaleStorage

useCustomLocaleStorage is a feature that allows JavaScript sites and applications to save key/value pairs in a web browser without an expiry date.

useLocaleStorage

5) useCustomSelector

useCustomSelector is a hook used in React applications to pull and use data from the Redux store. This hook allows functional components to pull specific data from the Redux store and allows the component to re-render when that data is updated

useSelector

Example:

useSelector example

6) useCustomDispatch

useCustomDispatch is a hook used with React Redux. This hook allows functional components to send actions to the Redux store. That is, it allows components to trigger state changes

dispatch

Example:

actions for dispatch

dispatch example

7) useCustomAuth

Checks whether the user is logged in or not

useCustomAuth

8) useCustomRouter

Hook used for navigating between pages

use router

8) useCustomMediaQuery

Hook used for detected screen size

media query

Example:

media query example

8) useCustomScroll

Hook used for detected screen scroll x and y

scrooling

Example:

scrooling example

About

ReactJS,NextJS frameworks helper custom-hooks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published