5 Custom React Hooks That Will Transform Your Code 🤖

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).

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!

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.

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.

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.

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.

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
• My Substack (here I publish more in-depth articles)