Custom Hooks to Lightweight Your React Project
Tags: showdev, react, javascript, productivity
Published: 2021-12-15 03:47:33

![React Custom Hooks](https://cdn-images-1.medium.com/max/2800/0*efj49Y4ARtOhLC0N)

Hooks are the JavaScript functions that let you add additional functionality to the React apps without writing a class. React provides built-in hooks such as useState, useEffect, useContext and also facilitates you to create custom hooks.

React hooks were introduced in React Version 16.8 and above and one of its main advantages is the reusability of stateful logic. Before the introduction of hooks, states can be maintained only in the class components but with the addition of hooks, states can now be maintained in the functional components without changing the component hierarchy.

Let’s take a look at some useful custom hooks in React and understand how to use them in your project.

## useTheme

The useTheme hook helps you to dynamically change the appearance of your application using CSS variables. This can be done by simply passing an object containing the key/value pair of the CSS variables you would like to modify.

The hook helps you to implement the light/dark components in your app.

![useTheme custom hook](https://cdn-images-1.medium.com/max/4028/1*bWsI6XCDWBLs2QTQmXTlOw.png)

## useInput

The useInput hook is used to simplify the handling of input events. Here is how you can install this custom hook.

![useInput hooks](https://cdn-images-1.medium.com/max/2184/1*dqNkKiuammNRgAoRYgcNOg.png)

Check out the useInput sandbox example [here.](https://codesandbox.io/s/useinput-forked-oxzxj?from-embed)

## **useKeyBindings**

useKeyBindings is used to bind pairs of keyboard events and handlers.

![](https://cdn-images-1.medium.com/max/2708/1*vwY2vahVW9Mum21_U3oo7g.png)

Sandbox [demo](https://codesandbox.io/s/usekeybindings-97ppz?from-embed) link.

## useOnline

useOnline is the status hook used to detect whether the user is online or offline. The return value will be boolean(True or false).

![useOnline hook](https://cdn-images-1.medium.com/max/2708/1*eOGE9abzBVe7VVeB7Tbk5g.png)

Sandbox [demo](https://codesandbox.io/s/useonline-tiqdb?from-embed).

## usePrevious

usePrevious hook enables you to access the previous value of a variable.

![usePrevious hook](https://cdn-images-1.medium.com/max/2708/1*56QKqpoYXQ6-c8cCFv7KXQ.png)

Sandbox [demo.](https://codesandbox.io/s/useprevious-uhjyr?from-embed)

## useWindowSize

The use WindowSize hook is used to return the window size that includes inner height and width and outer height and width.

![](https://cdn-images-1.medium.com/max/3288/1*cIdzfxBbrr4XBikQjp8Uwg.png)

Sandbox [demo.](https://codesandbox.io/s/usewindowsize-dkl83?from-embed)

## useAsync

[useAsync hook](https://github.com/streamich/react-use/blob/master/docs/useAsync.md) resolves async function or a function that returns a promise. Here is how we can use it.

![useAsync hook](https://cdn-images-1.medium.com/max/3288/1*UHTSqGVogiq7dXiY4si2fg.png)

## **usePageVisibility**

With the page Visibility hook, you can detect whether users are interacting with our website or not. It sends a visibility change event when the user lost focus on the page.

So the hook can be used to,

* Pause a video on page has lost user focus

* Page title changed

* To stop HTML canvas animation when the user is not on page

* Send notification or messages to the user on the page is active

![](https://cdn-images-1.medium.com/max/3288/1*wB2B17U8j09Gl_U3GdMVMA.png)

Feel free to use these modern react hooks you can find more custom hooks in the [react-use](https://github.com/streamich/react-use) package and[ Github rooks](https://github.com/imbhargav5/rooks).

So, this is all about React custom hooks. Hope you enjoy this article.

Want to build a lightweight, scalable, and quality application faster? Try [DhiWise](https://app.dhiwise.com/sign-up?utm_campaign=Dev.to&utm_source=Dev.to%20app%20sign%20up)- A 100% developer-centric platform to build modern applications with the technology you love.

Explore more about [DhiWise ](https://hubs.la/H0_-wmC0)and the technologies it support.

[Sign up](https://app.dhiwise.com/sign-up?utm_campaign=Dev.to&utm_source=Dev.to%20app%20sign%20up) Now!