react-custom-hooks

Custom hooks in React.js that are handy in daily day to day code

Custom Hooks

• useCounter - React Hook to handle counter, increment and decrement
• useDialog - React Hook to handle open and close dialogs
• useFetch - React Hook to call apis on load with Fetch
• usePrevious - React Hook to use previos state and props
• useToggle - React Hook to handle toggle button and lists
• useInputField - React Hook to use state values for input fields
• useUpdateEffect - React Hook to call snippet ONLY-ON-UPDATE
• useCopyToClipBoard - When you want to pass a state value and provide a copy to ClipBoard option
• useBase64Encode - React Hook to encode event String value to Base64 without storing text anywhere
• useSecondsTimer - React Hook to use timer from n to 0 seconds
• useTimer - React Hook to use timer from 0 to hh:mm:ss time runner until stopped.
• useClickInside - When you want to call a function when clicked inside the element Ex: Modal PopUp
• useClickOutside - When you want to call a function when clicked outside the element Ex: Modal PopUp
• useHoverIn - When you want to call a function when hovered or mouse over inside the element Ex: hovering a menu or enabling shopping card zoom
• useHoverOut - When you want to call a function when hovered or mouse out outside the element Ex: hovering out of a menu or disabling shopping card zoom
• useHoverEvent - When you want to call a function when hovered or mouse out inside and outside the element Ex: hovering out of a menu or disabling shopping card zoom. useHoverEvent hook has both useHoverIn and useHoverOut events
• usePagination - React Hook to handle numerical paginations

Other External Hook Libraries

• awesome-react-hooks - A curated list about React Hooks.
• react-use - Library with Collection of essential hooks
• react-hook-form - Handling Forms with Performant, flexible and extensible forms with easy-to-use validation.

# React Hooks!

Things To take care while creating Hooks!

• Handle Memory Leaks : The memory leak will happen if the API server or host took some time to respond and the component was unmounted before the response was received. Though the component was unmounted, the response to the request will still be received on completion. The response will then be parsed and setData will be called.

-> How To Fix Memory Leak Issue In React Js Using Hook