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.
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.
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.
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.
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.
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:
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.
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.
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
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 check out my site!
If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰