Top 5 Useful Custom React Hooks
They will definitely make your work easier!
Introduction
Nowadays, there are few developers who don’t use hooks regularly. In this article we’ll show 5 really useful and at the same time simple custom hooks that are likely to help in your project. I want to note right away that I am not their author, but only found their wide application in my practice, and I want to share them with you. The hooks and examples themselves I will demonstrate in typescript, since I think it’s much better to use than just vanilla JS, but it’s very close to it so if you don’t know TS, don’t worry.
Let’s start from the most popular (in my opinion):
1. UseToggle
This hook is very simple and similar to useState, with one main exception: its value can only be boolean. In other words, this is the same as useState, but it only works with boolean values — and is a little easier to use because to change the state you just need to call the callback without passing the value which we want to change, when the callback is called, it will change to the opposite.
I try to use this hook wherever possible, because when the eye sees useToggle, you immediately understand that it’s either true of false.
Live Demo | Source code:
2. UseDidMountEffect
This hook is also quite popular in my work, because there are many situations when the usual useEffect is not suitable. I’m talking about those cases when you don’t need to call something when the component is first rendered, but only when the input parameters are changed. This hook is called in the same way as the classic useEffect, only the functions that you put into it will only work if you change the parameters that you set this hook.
Live Demo | Source code:
3. UseOnClickOutside
This hook is not as simple as the previous ones, but nevertheless it is also quite popular. Its essence is to catch the moment of a click outside a certain block. For example, when you want to close a modal by clicking anywhere outside of it.
Live Demo | Source code:
4. UseWindowSize
Also a very useful hook that will give you the ability to monitor the size of the page window in real time.
Live Demo | Source code:
5. UseDebounce
Although this hook is quite rare, it will definitely come in handy if you want to speed up and optimize your application.
Its purpose is to block too frequent rerenders in the component. For example: you have an application with a product catalog. And it has an input field through which users search for products. Imagine that after each new character input by the user, a request is sent to the server with the desired search phrase.
If the user enters a word consisting of 10 characters, then a request will be sent 10 times. It doesn’t look very good. This is where this hook will help you, and will make sure that the request is sent to the server after a certain period of time when the user does not enter new characters. It will allow you to postpone API calls so that they do not occur too often.
Live Demo | Source code:
Thanks for reading!
