How to Use Custom Hooks In Your React App
React with Hooks is probably the most awesome part about React thus far. The power and ability it provides is almost endless and that continues on with Custom Hooks. Custom Hooks allow you to create your own reusable Hooks to use in your code and here I’m going to walk you through how to do just that.
What are Custom Hooks?
Hooks are powerful tools to share Javascript code between components without having to repeat yourself. Custom hook files are prefixed with use at the beginning, so if I wanted to make a custom hook, I would name the file something along the lines of useDetectOutsideClick. While the idea of custom hooks may seem like a difficult topic to wrap your mind around, they’re actually quite simple as they’re just a javascript function prefixed with “use” that we will be able to “re-use” throughout our project. Custom Hooks make our code more dry and easier to understand. Lets walk through creating this custom hook.
Starting off
First things first, the file you create that contains your custom hook should be located in the same directory as your components that you’d like to use the hook in. Next, you’re going to declare a regular function like so
export default function useDetectOutsideClick() {}
Here we declared our function and exported it, and technically we could import this hook into any component we’d need it now. But we want some functionality here, we want our hook to provide a return of some sort so that the hook can have some effect on our code inside of our component. Here we can see what a fully functioning hook might look like.
Here we have a fully developed javascript function with a return value and everything! This hook is being used to detect if, when a dropdown menu is showing and active, if there is an click outside of the menu and if there is, it will make the menu hidden again! Pretty simple, right?
Putting this hook to the test
Now we need to make this hook accessible in our code so it can actually serve a purpose. Now if you’ve used other hooks such as useState and useEffect, like we did above^ you’ll have no problem importing custom hooks as well.
import { useDetectOutsideClick } from './useDetectOutsideClick';It’s as simple as that, now you have access to your custom hook inside of your component. To use its logic you could do something along the lines of..
Here we called our custom hook with the help of another built in hook useRef to give our custom hook the functionality it needs to help us close our menu when a user clicks any place outside of the menu itself.
Conclusion
Here we discussed what custom hooks are, how to create and how to implement them. Custom hooks take your code to the next level giving you reusability like never before. Custom hooks help keep code dry and clean while also making it easier to write as well.
