React Custom Hooks with Examples

Hello ReactJS Friends,

Today we will learn about the ReactJS Custom Hooks. What are they? And How to Create Custom Hooks in React?

ReactJS added hooks since the release of version 16.8. Using hooks, the function components can access state and other React features. React provides built-in hooks: useEffect, useState, useContext, useRef, useMemo, useCallback and more. Every hook has its own use and properties. Using these hooks as a base, ReactJS Developers can create their own custom hooks.

What are Custom Hooks in React?

Custom Hooks are reusable functions. Custom React hooks are an essential tool that lets you add exceptional, unique functionality to your React applications. Using custom hooks, you can fulfill missing functionalities of your React projects.

Rules for using Custom Hooks in React

• As a function, it takes input and returns the output.
• Its name starts with “use” like useQuery, useMedia, etc.
• Unlike functional components, custom hooks return normal, non-jsx data.
• Unlike normal functions, custom hooks can use other built-in hooks such as useState, useRef… and even other custom hooks.

Benefits of using Custom React Hooks

Custom hooks in React offer several advantages:

• Reusable – React custom hooks can be used repeatedly, reducing the time for writing the code twice.
• Less Complexity – Custom hooks provide a cleaner codebase that helps to reduce complexity and redundancy.
• Limitless hooks – Following the ReactJS hook standards, you can create any number of custom hooks as per your requirement. Also, lots of custom hooks are available on the internet, which you can use.

Example of ReactJS Custom Hook:

import { useState, useEffect } from "react";
import axios from "axios";
export const useAxiosFetch = (axiosParams) => {
    const [data, setData] = useState(undefined);
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(true);
    const fetchData = async () => {
        try
        {
            const response = await axios.request(axiosParams);
            setData(response.data);
        } catch (error) {
            setError(error);
            setLoading(false);
           } finally {
               setLoading(false);
             }
   };
   useEffect(() => {
       fetchData();
   }, []);
   return { data, error, loading, fetchData };
};

Conclusion:

This way, you can easily create custom hooks in React. Share your doubts with me in the comment box. Share the tutorial with your friends and stay updated to learn more about ReactJS.

Happy Coding!