In functional components, we can do everything with the help of hooks, mainly the useState and the useEffect hook, but the power that hooks have given us has gone beyond our imagination. Here we can even make Custom Hook(s) and use them in our apps like other hooks. Pretty similar to the other hooks, these custom hooks have to follow the same rules as the other hooks do.

We will discuss everything regarding custom hooks, how they are made, rules for making custom hooks, etc in this blog.

Let’s start…

Index

1. What are custom hooks in React?
2. Rules to be followed by these hooks
3. Rules for all types of hooks
4. Why custom hook?
5. What are we up to?
6. Creating the React App
7. Working on the UI part of our App
8. Updating our App with Custom Hook
9. Conclusion

What are Custom Hooks in React

According to the documentation, “A custom Hook is a JavaScript function whose name starts with ”use” and may call other Hooks. As both components and hooks are functions, this concept is nothing new and works fine.”

In simple terms, hooks are just like components- javascript functions that are made to make our React App more readable and editable.

The only difference between them according to us is that the components store both logic and HTML tags or the JSX while custom hooks store only logic or a specific function that might be repeated in the app.

When it comes to creating custom hooks, the sky’s the limit. We can create any hook that we want and use it anywhere in our app while following the rules used to govern other hooks which we will discuss in the next section.

We can use any of the pre-defined hooks inside the custom hook but again we have to follow the rules as they are the basic hooks that React library has provided us with and will not work if defined or used incorrectly.

Just like in a normal hook, every time we call our custom hook the states or side-effects we have used inside it to make its logic are completely isolated or cut off from our main component. It means that once the hook is called and the logic is rendered, the states and effects will not meddle with other effects or states in the main or any other component. It is completely separated from them and will only act when it’s called.

Rules

1. Hooks should only be called at the top level of our app and not inside any loops, conditional statements, or functions.
2. Hooks are a feature of functional components and should not be used in class components
3. Every custom hook should have a prefix in its name ‘use’. It tells react that this is not a component but a hook and should follow the rules of hooks that are defined above.
4. You cannot call hooks inside functions but custom hooks are an exception to that

Why Custom Hook in React?

Lets’ understand it this way, we divide our main component into several other components and pass states and functions between them as props to make our code more readable and understandable by not only developers but others as well.

Custom hooks work in the same way but rather than dividing the code into small pieces it is used to isolate a specific logic that we have to use at any time throughout the production of our app and call it when it’s needed in every component just by writing a single line of code. Isn’t that great?

Like a hook to fetch data from an API, we call it in any component with just a single line of code, and not bound by a specific API just by the argument url which we can change every time

But, it is not only used for separating the most used logic from the function but can also be used to separate pieces of code that might be a bit confusing without a heads up of what’s going on.

Consider a scenario, if we have a component in which we have two or more separate pieces of useEffect logic going on, it’s better to put them into separate custom hooks and name them, even if this logic will not be shared between other components.

This is because it is far easier to read and understand the logic in this way rather than reading multiple lines of strings of useEffect hook and understanding them with the component.

And as we are free to give them any name we want (starting with use), it becomes easier to understand the logic used inside that particular custom hook as just by reading the name one can tell or guess the logic inside the custom hook. We think this approach is better than explaining every line with comments.

And unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments and whether it should have return statements or not. In other words, it’s just like a normal function

Now let’s see this hook in action. %[tekolio.com/how-to-make-a-custom-hook-in-re..