Why and How you can make your Custom Hooks in React.js?
First we need to remember why is a Hook in React, the hooks in React were added in the version 16.8 and those are functions It allows you to use state and other React features without writing a class.
Why You Need to Create Your Own Hooks?
Sometimes you’re gonna want to create your own hooks, one of the reasons of why you want to create them, it’s to be able to reuse certain logic in a determine function.
You can also create a helper function but there is another advantage of creating your own hooks and is to incorporate State and keep the value of a function in a persistan way.
More Advantages of Create Your Own Hooks:
- Custom Code
- Advantages of React like: State, Effects, etc.
- Reuse in Another Projects or Parts of Your Site
How You Can Create Your Own Hooks - Example
The first thing that you want to do is a folder with the name hooks in the src section, after that inside the folder you can create a file with the name that you want but is recommended that the name begin with the prefix use, example: useSelect.jsx or useResult.jsx the structure is very similar to that of a component, so let’s see…
This is the basic structure of a Custom Hook:
////////FILE OF CUSTOM HOOK
import {useState} from 'react';/////////You can take any parameter in this function because it will come in the component that you use this hookconst HookName= () => { ////////The Necessary Sates For Your Hook Goes Here
const [state, setState] = useState(); ///////Functions for the Logic Part Goes Here ///////It Depends what you want to return you're gonna use Keys or Parenthesis
const FunctionName= () => ( //////This function is like the return in a normal component, I mean you can return a Interface or just Data.
); //////Here is gonna return the Interfaces, State, functions that modifies the state, etc. that you're gonna use in the component. //////IMPORTANT : The order in which you are gonna return them is very important because since that's how you're going to extract into the corresponding component return [] / {}}
export default HookName;
For a better view here is the link for GitHub Gist: https://gist.github.com/DanyRivera/99d6af50a89428f702c0593cb29cc893
Ex:
Now you have your Custom Hook but now how you can use it?
First you need to import the hook:
import useHookName from "../hooks/useHookName";///////From the Component in Which you're gonna use your Hook*** = Here goes what you want to extract from what is returned from the component
const [***] = HookName(Parameters Here)////Note: If you return a Interface you need to use de syntax component
<Interface />
Ex:
As you can see is very easy to create a custom hook and you can have many advantages of it, in conclusion create your own hooks can simplify a lot the work in the future and you can have a scalable website.
