React Custom Hooks

Cover Image: educative.io(Cameron Wilson)

React Hooks are here to stay. Assuming you are familiar with React Hooks such as useState, useEffect, useContext, etc. or at least have a basic understanding of the functionality of React hooks. Let's start talking about React custom hooks. I will be precisely explaining from a tutorial video by Stephen Grider. So, with no further delay let's dive into the React custom hooks.

Let's assume that we are working on an online video-sharing platform, like YouTube. Maybe at some point in time, we decide to create another component called Analytics, to show our users some analytics about all the different videos that they have posted. So inside the old components, chances are we are going to need to somehow fetch a list of videos that a user has made. So we might end up deciding to just duplicate or copy-paste all of that video fetching logic from our App component to analytics component. Now, of course, there might be some very small, subtle differences in the video fetching logic between two components(our app and analytics).

Right now, let's just assume that the code is more or less identical in nature. Naturally, any time we've got some identical code shared between two different locations inside of a project, that is usually a sign that we want to extract that code and make it a little bit more reusable in nature.
So, we create a custom hook.

Building your own Hooks lets you extract component logic into reusable functions.

Then, our app component and analytic component can use the custom hook of the videos as opposed to duplicating all that logic between the two components.

Before writing a code let's understand few things about the custom hooks.

• It is the best way to create reusable code in a React project except making components. So usually we make use of custom hooks any time we want to make some calls to say useState or useEffect, a little bit more reuseable in nature.

• Created by extracting hook-related code out of a function component, We will making the functional component reusable.

• Custom hooks are not related for making JSX reusable. To make JSX reusable we create a different component.

• Custom hooks always make use of at least one primitive hook internally. Custom hooks contains at least one primitive hook such as useState or useEffect. We are not building anythings such as useState or useEffect from scratch. Instead, we're just talking about taking some existing code that is making use of useState or useEffect or both and putting it to a reusable function. So, the word 'custom hooks' might be misleading because it might make you think we are going to something like useState or useEffect.

• Each custom hook should have one purpose: When we build a custom hook we try to have one goal, one purpose, or work with one kind of resource inside of it.

• Data-fetching is a great thing to try to make reusable by making a custom hooks.

Process for creating reusable hooks:

1. Identify each line of code related to some single purpose.
In the above code snippet, we are only managing the two pieces of states, they are the list of videos and a selected video.

2. Identify the inputs to that code.
We have to figure out the input in order to run this code. In this there is only one, ie. the default search input("React hooks tutorials").

3. Identify the outputs to that code.
When the code gets the input what must the function App give an output? Well, we have two outputs, one is the video arrays itself and the second is onTermSubmit function.

4. Extract all of the code into a separate function, receiving the inputs as arguments, and returning the outputs. Let's take an example of a sentence for you which might have a clear idea."If you give me a list of inputs(default search term), I will give you a list of outputs (a way to search for videos & a list of videos)."

Now, We create a need folder called 'Hooks' and inside we create a file 'useVideos.js'

*Note: It is not necessary to name a hook starting from 'use' but by convention or usually custom hooks are named like the primitive hooks such as useState and useEffect.

We can return either objects or arrays from the custom hooks. Here we are returning an array of videos and search. Inside the previous App function the function onTermSubmit does not make sense inside this hook. So, I've simply renamed the function to search.

There you go! This is our new custom hook. We can reuse this function in any component to get the video and list of videos by providing a search term.