How to Create a Custom Hook in React

Why to create a custom hooks

1. If you have to share same logic of program in multiple part of your webapp then creating custom hook will help to prevent the duplication of code and you can just import logic in the form of hook to use in multiple part.
2. Imagine you are creating an webapp for converting currency. You can make custom hook (like useCurrencyConverter ) which can fetch data from api and convert to desired currency
3. The code which is readable is considered as good code. If you use custom hooks that means you are separating logic from in separate place. This makes your hooks focused and easier to understand. If you have any problem in logic you can just change from one place and it will change from every place.

How to create a custom hook in react

lets understand from given example.

Custom Hook to convert currency: -

import {useState, useCallback} from "react"

function useCurrencyInfo(currency) {

useCallback((currency) => {

   const [data, setData] = useState({})
      fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`)
      .then( (res) => res.json())
      .then( (res) => setData(res[currency]))
   }, [currency])

   return data

}

export default useCurrencyInfo;

Imagine you are creating a webapp to convert currency.

Explanation : The above code is one of the custom hook. This hook is named as useCurrencyInfo hook. This hook is created to convert one type of currency to another currency. for example we can convert usd(dollar) to npr(Nepali rupees)

we have imported useState and useCallback hook which has been imported from core react to use. We make function

import {useState, useCallback} from 'React'

function useCurrencyInfo (currency){
      // codes

}

Then we have used useCallback() hook to write the code as it take one JavaScript callback function and another dependencies

useCallback(fn, [dependency])

The useCallback hook renders for first time when website is loaded and re render when dependency value changes. In above example we use ‘currency ’ as dependency because we have to run the function if currency value has changed .

const [data, setData] = useCallback{}

The useState is used to keep the state of data which has been fetched from api. We store the currency value in data through setData.

fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`)
      .then( (res) => res.json())
      .then( (res) => setData(res[currency]))

In above code the data of currency has been fetched . We will get data in the form of string so we have converted it to json and we accessed the data of required currency using useCallback function.

Note:

1. Hooks starts with prefix “use”. This will ensures that proper rules for execution will be applied.
2. The Hooks are like basic JavaScript function and it can contains other hooks like useState and useCallback and others as used in above example.