5 Custom React Hooks That Will Transform Your Code 🤖
Tags: webdev, javascript, react, beginners
Published: 2023-02-05 02:10:42

Yesterday after finishing my daily article (*yeah, I publish a new article about front-end development every day, so make sure to follow if you want a daily pill of code 😉*), I went to code for a little and... I started coding **some custom hooks** for a side project I am building (*I am talking about it on my Twitter:* [*@thenaubit*](https://twitter.com/thenaubit)).

I realized there are lots of **really useful custom React hooks**. So I am starting a new series where I will post some of those (*coded by me or found on the Internet and converted to TypeScript*).

And if you have done one that you are proud of, feel free to **share a gist link** in the comments, and I will add it to the following article!


## 1️⃣ useWindowSize Hook
I am pretty sure you have needed to **get the width and height** of the user's window in some projects you have worked on.

Well, now you have a hook for that, so you can do it even easier than before!

{% embed https://gist.github.com/NauCode/8f6cad0baaeb9911888edb92c9a8b72a %}

This hook can be particularly useful when implementing responsive design, and for some reason, you need to run some specific code in some resolutions!


## 2️⃣ useKeyPress Hook
The next hook lets you **detect when a specific key is pressed**. This can trigger events or actions based on the key pressed. For example, for closing a modal, submitting a form... you know, there are lot of options.

{% embed https://gist.github.com/NauCode/04b282a262e2aedd8db015e111bd2318 %}

Of course, I will give you an example of how to use it:

`const closeModalKeyPress = useKeyPress("Escape");`

Yeah, it is that easy.


## 3️⃣ useInterval Hook
This hook allows you to **use the famous setInterval function as a hook**! Like the setInterval function, this hook has many uses, like animations, updating data at regular intervals, or even setting a timer.

{% embed https://gist.github.com/NauCode/01b4dfb1b6d3e8f6c8d035d6ac3ed77b %}

You can use this hook like this:

```
const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);
```


## 4️⃣ useDebounce Hook
Now we will talk about one for debouncing functions. If you don't know what it is, basically the function **will only be executed after a certain amount of time has passed without it being called**.

This is useful, for example, for rate-limiting API calls or state updates on input changes, like when you are typing some text in a search input.

{% embed https://gist.github.com/NauCode/ae193d587f23c04bc927d1bb848809cc %}

A usage example would be:

```
const [inputValue, setInputValue] = useState("");

useDebounce(() => {
// make API call
}, 500);
```


## 5️⃣ useThrottle Hook
The previous one was a debounce hook, and now it is the turn of a throttle hook.

As its name says, it is a hook to throttle a function. It means **it will be executed once per every specified interval of time**. This can be useful for preventing too many API calls or events from being triggered in rapid succession.

{% embed https://gist.github.com/NauCode/b6570adb60411de66b364df229fb1cd2 %}

An example would be:

```
const [inputValue, setInputValue] = useState("");

useThrottle(() => {
// make API call
}, 500);
```

* * * * *

Well, we reached the end of the article, but before you go, I want to say a few extra key things.

The first one is these hooks are examples, just like any other code you find on the Internet. **You should not just copy and paste** them into your project. You should read them, understand them and improve them!

With that being said, I really enjoy writing this kind of article, so if you also like them, **make sure to follow and like** them. That way, I will know people want more, and we will have more. Oh, and as I said at the beginning of the article, if you have some little hooks you like, share them here; **I want to add them in the next post!**


## 🌎 Let's Connect!
-   My [Twitter: @thenaubit](https://twitter.com/thenaubit)
-   [My Substack](https://coderpreneurs.substack.com/) (here I publish more in-depth articles)