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
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.
Example:
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
Example:
The concept of refetch in React Query is a feature used to re-pull data
Example:
useCustomLocaleStorage is a feature that allows JavaScript sites and applications to save key/value pairs in a web browser without an expiry date.
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
Example:
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
Example:
Checks whether the user is logged in or not
Hook used for navigating between pages
Hook used for detected screen size
Example:
Hook used for detected screen scroll x and y
Example: