8 Awesome React Hooks
Tags: react, javascript, webdev, beginners
Published: 2020-12-23 15:23:58

React.js is currently the most popular JavaScript library for front end developers. Invented by Facebook, but available as an open-source project, it’s used by developers and corporations all over the world.

React really changed the way we build single-page applications — one of its greatest features is hooks. Hooks were introduced not long ago and enabled us to use functional components instead of class-based components while dealing with the state. Besides built-in hooks, React offers us ways to implement our own custom hooks.

Here are some of my favorite examples for custom hooks and their implementation that you can also use in your applications and projects.

---

## useTimeout - React Hook
With this hook, we can implement setTimeout using a declarative approach. First, we create a custom hook with a callback and a delay. Then we use the useRef hook to create a ref for the callback function. Finally, we make use of useEffect twice. One time for remembering the last callback and one time for setting up the timeout and cleaning up.

The example shows an implementation of a timer:
![useTimeout - React Hook](//images.ctfassets.net/28643bqnqgzl/6wVwlZFsyai6ND4qr6nH7j/6c6501fffae8798de290fd67adfe80a1/rh1.png)

---

## usePrevious - React Hook
This is another great custom hook that we can use in our applications. With it, we can store props or the previous state. First, we create a custom hook that takes in a value. Then we use the useRef hook to create a ref for the value. Finally, we use useEffect to remember the latest value.

The example shows an implementation of a counter.
![usePrevious - React Hook](//images.ctfassets.net/28643bqnqgzl/5Jo9rQN54DRh0Bbtq3mCW5/acae81a63e224172ee810eeea1bff12e/rh2.png)

---

## useClickInside - React Hook
If you deal with event handling for clicking inside of wrapped components then the useClickInside hook is the right choice for you. First, we create a custom hook that takes in a ref and a callback to handle the click event. Then we make use of useEffect to append and clean up the click event. Finally, we use useRef to create a ref for the component to be clicked and pass it to the useClickInside hook.
![useClickInside - React Hook](//images.ctfassets.net/28643bqnqgzl/4nIDUQsfiejVRFF3eLJ1v9/99ba9dea377583c09ba96269e32b1f8f/rh3.png)

---

## useClickOutside - React Hook
The useClickOutside hook is quite similar to the useClickInside hook but it takes care of clicking outside a wrapped component and not inside. So again, we create a custom hook that takes in a ref and a callback to handle the click event. Then we make use of useEffect to append and clean up the click event. Finally, we use useRef to create a ref for the component and pass it to the useClickOutside hook.
![useClickOutside - React Hook](//images.ctfassets.net/28643bqnqgzl/WilMHRGnV8sLSLL41CqZL/bbba6697b6400d234b88acf6ea9c3072/rh4.png)

---

## useFetch - React Hook
The useFetch hook can be used to implement fetch in a declarative way. First, we use useState to initialize the response and error state variables. Then we use useEffect to asynchronously call fetch and update the state. Finally, we return an object that contains the response/error variables.
The example shows a way to fetch a character from the Star Wars API and render its name:
![useFetch - React Hook](//images.ctfassets.net/28643bqnqgzl/5l1p7UFaD95p1zJt2zgu0z/291c3c93d98870a4a6ae3fb1adbf730c/rh5.png)

---

## useInterval - React Hook
If you want to implement setInterval in a declarative manner you can use this hook called useInterval.

First, we have to create a custom hook taking in a callback and a delay. Then we use useRef to create a ref for the callback. Finally, we use useEffect to remember the latest callback and to set up the interval and clean up.
The example shows an implementation for a custom ResourceCounter that can be used in a browser game, for example.
![useInterval - React Hook](//images.ctfassets.net/28643bqnqgzl/3Cm21kv0bD7el75ie3NXC2/99e1df7e03c0b7578710deed69df6b2b/rh6.png)

---

## useComponentDidMount - React Hook
This hook is a small example of how to execute a callback right after a component is mounted. For the second argument, we simply use useEffect with an empty array, to execute the provided callback once as soon as the component is mounted.
![useComponentDidMount - React Hook](//images.ctfassets.net/28643bqnqgzl/kHvi3aY1tfWFt0DMgSC66/8f749220a7221e9e22a85cd29fad5929/rh7.png)

---

## useComponentWillUnmount - React Hook
useComponentWillUnmount is similar to the example above but will execute a callback as soon as the component is unmounted. So we use useEffect again with an empty array as the second argument to execute the provided callback right before the cleanup
![useComponentWillUnmount React Hook](//images.ctfassets.net/28643bqnqgzl/2Aju8NS7W90tAQpss4D9kd/e8d3982dbb01f0335e49d6059effced4/rh8.png)

---

These are some of my favorite examples of custom React hooks that you can use in your applications.

If you are looking for inspiration and [front end projects](https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/) check out my site!

**If you like what I write and want to support me and my work, please follow me on [Twitter](https://twitter.com/simonholdorf) to learn more about programming, making, writing & careers🥰**