Custom Hooks

In this article, we will discuss about Building Custom hooks in React.

There might be instances where we have been using the same repetitive and redundant stateful logic inside multiple components. Lets take a look at one example. We have two components, one is Employee Component and the other one is Department Component. Employee Component connects to a Web API, fetch the employee data when the Component is mounted and display the data.

Similarly Department Component connects to a Web API, fetch the departments data when the Component is mounted and display the data.

We might write the same code in both the Components to achieve this. We were able to handle this by creating Render props and Higher Order Components in the case of Class Components.

What if if we want to reuse the code between function components. 

Lets see how easily we can do that in the case of function components. 

We will create three different components. One is Employee Component, second one is Department Component and the last one is App Component. 

We have developed these components previously, lets paste the components one by one. 

We can create a Javascript function, write the reusable code in that function and this function can be used in any component where we want to reuse that logic.

Lets create function called as useList and this function accepts Web API url as a parameter, 

Now lets create a state variable in which we will store the list data and we will initialize it to empty array.

Now we will call the API with in useEffect hook. I have the code handy and pasting it here. 

Now we will return the list from this function. Remember that it is a Javascript function and we can return anything as we want.

With in that Javascript function, as we are using other React hooks then that function will be referred as Custom Hook. 

Now we can call this hook from both Employee Component and Department Component. 

Save the Changes, navigate to the browser. We can see that both Employees data and departments data being displayed. 

Building our own Hooks lets us extract component logic into reusable functions.

A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. It is a convention that we will start the hook name with use else we will be violating the rules of Hooks. We will discuss later about rules of Hooks. 

A custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, to return.

One hook can be used by multiple components as we have seen here, and every time we use a custom Hook, all state and effects inside of it are fully independent from one component to the other component.

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function useList(url){
  const [data,setData]=useState([]);

  useEffect(()=>{
    fetch(url)
      .then(res => res.json())
      .then(
        (result) => {
          setData(result);
        }
      );
  });

  return data;
}
function Employee(){

  const employees=useList("https://localhost:44306/api/Employee");

  return (
    <div>
      <h2>Employees Data...</h2>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Location</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
        {employees.map(emp => (
          <tr key={emp.Id}>
            <td>{emp.Id}</td>
            <td>{emp.Name}</td>
            <td>{emp.Location}</td>
            <td>{emp.Salary}</td>
            </tr>
        ))}
        </tbody>
      </table>
    </div>
    );
}

function Department(){
  
  const departments=useList("https://localhost:44306/api/Dept");
  return (
    <div>
      <h2>Department Data...</h2>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
        {departments.map(emp => (
          <tr key={emp.Id}>
            <td>{emp.Id}</td>
            <td>{emp.Name}</td>
          </tr>
        ))}
        </tbody>
      </table>
    </div>
    );
}

function App(){
  return(
    <div>
      <Employee></Employee>
      <Department></Department>
    </div>
  )
}
const element=<App></App>

ReactDOM.render(element,document.getElementById("root"));

Video Reference: