In this article, we will deep dive into the most important concept that REACT provides us called Custom hooks.
React provides us with some important built-in hooks such as useState,useEffect and useReducer, But sometimes we wish or require that there should be hooks for some special purpose like to fetch data from API or to know whether the user is online or not, for this certain purpose, React provides you with the power to create your own custom hook.
Before exploring the custom hook and creating our first custom hook let us understand what is hook in react and what rules they follow.
What is Hook?
Hooks allow us to "hook" into the react features such as state or lifecycle,
Because hooks allow the Functional Component to have all the access of state and other react features, the usage of class Component is generally no longer needed.
REACT identifies the particular function as a hook because it uses the naming convention as the prefix "use" followed by the capital letter name of the hook and that is why react treat it as a hook, e.g. useState,useReducer,etc.
Rule to use Hooks
Hooks should only be called in your React Functional Component and not your normal JavaScript functions.
Calling of Hooks in the React Functional Component should be at the top level.
Don't call Hooks inside loops, conditions, or nested functions.
Now, let's move forward with creating our Custom hook in this article we are going to create two custom hooks i.e. useFetch and useOnlineStatus. the naming of which should start with the prefix "use" followed by a capital letter
Custom Hook: useFetch
Sometimes while creating the REACT app we need to fetch different APIs all the time, As there is no built-in hook for fetching API we will create one,
above we have the useFetch Hook , it is an normal javaScript function , with the ability to fetch the API endpoint we just need to need to provide the "url" ad the function will return thr three variable namely data,loading & error variable respectively.
It makes the useFetch hook a reusable function we can simply use useFetch in our functional component as follow below.
simply use the useFetch by just importing function and destructuring the Object.
Custom Hook: useOnlineStatus
Sometime it is necessary for us to find that a Particular system or a user is online or not , for this case we can simply create a function as "useOnlineStatus" to see if the system is online or not
In the above example, we can see that we used a window event for "online" and "offline" to verify if the particular user is online or not, in this way, the function returns the variable "isOnline" which is a boolean value and based on this value we return the output result using "h1" tag.
Conclusion
Hope that this article finds you helpful and you got a clear understanding of what is hooks in react and how the react makes the hook a reusable component,
Rules for the usage of hooks and its naming convention used in react.
We also built our own custom in the form of reusable functions and saw how we used them in different components.
please leave a comment if you have any questions or feedback.
I've learned this stuff on the internet as well, Here are the resources given and tried to simplify it from the user's perspective.