My Top 5 Custom React Hooks for your Web App

Ritesh Kumar
Apr 1 · 3 min read

Why React Hook?

Many times, you would have faced the clutter of unrelated logic inside your React component if you have built the react apps earlier using class components.

In many cases, you might not be able to break the component into smaller pieces due to state logic spread all over the component. It will be harder to write test cases.

To solve these problems react has introduced some manageable functions which let you split one component into smaller functions. It will allow you to write the reusable functional components without using class components.

Hooks let you use more of React’s features without classes.

What is Hook?

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components.

When should you use a Hook?

If you have a functional component and you need to add some state to it, previously you had to convert it to a class component. Now, with the introduction of React Hooks in React 16.8, you can now use a Hook inside the existing functional component to achieve the desired state.

Normally, variables “disappear” when the function exits but state variables are preserved by React.

Custom Hooks

Custom hooks leverage the power of React hooks to add additional functionality to our React apps.

React Hooks to listen to both mouse down or up and click events with a once called function.

This library provides three React Hooks:

  • useMouseAction
  • useMouseDown
  • useMouseUp

They all want the same parameter: either the callback function or an options object with the callback function in the onAction parameter.

They all return an object of event listeners to add on the element.

React hook for subscribing to online/offline events and the navigator.onLine property to see current status

React side-effect hook that manages a single indexDB item. A drop-in replacement over useLocalStorage. We rely on indexDB for structural cloning which is not supported in local storage.

React hook to dynamically load an external script and know when its loaded.

React hook to communicate among browsers contexts (windows, tabs, iframes).

Example use case: When the user presses logout in one tab, logout from every other tab.

Frontend Weekly

It's really hard to keep up with all the front-end…

Ritesh Kumar

Written by

Software Development Engineer 3 at Nutanix CALM ☼ IIT Grad ☼ 1 U.S Patent Filed ☼ Open To Ideas

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Ritesh Kumar

Written by

Software Development Engineer 3 at Nutanix CALM ☼ IIT Grad ☼ 1 U.S Patent Filed ☼ Open To Ideas

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store