Read: Class 32 - 401-advanced-javascript-dania/amman-javascript-401d1 GitHub Wiki

Custom Hooks

Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return. In other words, it’s just like a normal function. Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.

  • Hooks are exported as a function, named as useXXX()
  • Hooks return data or behaviors (functions) that are required to reuse their internal functionality
  • Hooks are imported into components
  • Components can re-use the hook functionality or data/state as needed
  • Hooks do not render

10 React Hooks you Should Have in Your Toolbox

  1. useArray hook Array manipulation is what a dev goes through every weekday. Adding elements to an array or removing an element at a given index is a daily routine for us. useArray reduces this burden by providing us with various array manipulation methods. This hook is a part of the react-hanger package.

  2. react-use-form-state hook Forms are everywhere, even in the smallest of applications we have to encounter forms and manage their state. Managing form state in React can be a bit unwieldy sometimes. react-use-form-state is a small React Hook that attempts to simplify managing form state, using the native form input elements you are familiar with.

  3. react-fetch-hook Making ajax calls is like the most basic and most performed task for a frontend developer. And the React community is quick enough to create a hook for this purpose too.

  4. useMedia hook useMedia is a React sensor hook that tracks the state of a CSS media query. We all know the importance of the media queries and how much important is responsiveness for any site.

  5. react-useportal hook React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. And this hook helps us do that.

  6. react-firebase-hooks We all appreciate the greatness of firebase and use it a lot in our projects, whether its for authentication or storage. And this hook is the one we really need. Install

  7. use-onClickOutside hook An outside click is a way to know if the user clicks everything but a specific component. You may have seen this behavior when opening a dropdown menu or a modal or a dropdown list.

  8. useIntersectionObserver hook A React hook for using intersection observers. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

  9. use-location hook The name says it all, this hook is used for getting the location of the browser.

  10. use-redux hook This one is for my redux readers. This hook returns the store and dispatch property.