Skip to main content

Custom Hook ↔ user defined Hook to consume Library Hook & reuse stateful logic

aka Custom-Hooks

usehooks.com​

collection of useful custom hooks/snippets

useToggle()​

Custom Hook to flip boolean Param

useRouter()​

Custom Hook to combine useParams(), useLocation(), useHistory() & useRouteMatch()

useEventListener

usePrevious()​

Custom Hook to get previous value of props or state

useOnClickOutside()​

Custom Hook to detect click outside a specific element

useAsync()​

async Custom Hook to return value, error, status of Data Fetch

useEventListener()​

Custom Hook to Refactor event listeners

useWhyDidYouUpdate()​

Custom Hook to debug which prop change trigger re-render

Source: usehooks.com/useWhyDidYouUpdate/

useDarkMode()​

Custom Hook to handle dark mode toggle, req useLocalStorage() & useMedia()

useLocalStorage()​

Custom Hook to

useMedia()

useScript()​

Custom Hook to Dynamically load external Script

useOnScreen()​

Custom Hook to return boolean to check if node (as ref) is visible on Viewport; Abstracts Intersection Observer API Web API

useAuth()​

async Custom Hook to get Auth state from Backend/Online API

References​

  1. useToggle() ↔ Custom Hook to flip boolean Param

  2. useRouter() ↔ Custom Hook to combine useParams(), useLocation(), useHistory() & useRouteMatch()

  3. useAuth() ↔ async Custom Hook to get Auth state from Backend/Online API

  4. usePrevious() ↔ Custom Hook to get previous value of props or state

  5. useOnClickOutside() ↔ Custom Hook to detect click outside a specific element

  6. useAsync() ↔ async Custom Hook to return value, error, status of Data Fetch

  7. useEventListener() ↔ Custom Hook to Refactor event listeners

  8. useWhyDidYouUpdate() ↔ Custom Hook to debug which prop change trigger re-render

  9. useDarkMode() ↔ Custom Hook to handle dark mode toggle, req useLocalStorage() & useMedia()

  10. useLocalStorage() ↔ Custom Hook to

  11. useScript() ↔ Custom Hook to Dynamically load external Script

  12. useTypedSelector() ↔ Custom Hook var of useSelector() with fixed type annotations

  13. useActions() ↔ Custom Hook to bind actionCreators to Dispatch