React Custom Hooks - Build your own Hooks

What are Custom hooks in React?

Custom hooks are like normal javascript functions but with the power of using other built-in hooks of React like useState, useEffect etc., so that you can extract component logic into reusable functions.

Rules for creating custom hooks

• Name must start with use so that rules of Hooks can be applied.

Now, you might wonder whether if I don't put use as a prefix, whether it will perform the custom hook functionality or not. Well, it does but by putting use as prefix, React understands it's a custom hook and applies the rules of hooks implicitly.

Let's see the differences between custom hooks and normal functions in javascript?

Custom Hooks	Functions in Javascript
Designed specifically for using in functional components to extract component logic into reusable, standalone functions	Normal functions are more general-purpose and can be used anywhere in the application
They can access and update the component's state and props	Normal functions can't update the component's state and props
Name should start with use	Any meaningful name
Can only be used within the body of a functional component	No such restriction

Example of a custom hook?

Below is an example of custom hook which is used to debounce the execution of the callback function for a specific time.

import { useState, useEffect } from 'react';

function useDelay(callback, time) {
    const [value, setValue] = useState();

    useEffect(() => {
        const timeoutId = setTimeout(() => {
            callback(value);
        }, delay);

        return () => {
            clearTimeout(timeoutId);
        };
    }, [callback, time, value]);

    return [value, setValue];
}

export default useDelay;

Usage of the above custom hook in another component

import React from 'react';
import useDelay from './useDelay';

function App() {
    const [key, setkey] = useDelay(fetchAPI, 1000);

    function fetchAPI(value) {
      //Fetch operation from backend
    }
    
   //render
}

export default App;

The above custom hook allows you to debounce the execution of the callback function fetchAPI by 1000ms. This custom hook can be reused across multiple components where ever debouncing is required.

Advantages of using custom hook?

There are several advantages of using custom hooks:

1. Reusability: Custom hooks allow you to extract component logic into standalone functions that can be reused across multiple components, making your code more modular and easier to maintain.

2. Improved performance: Custom hooks can also help in improving performance, for example by prevent unnecessary re-renders.

3. Abstraction: Custom hooks helps you in making your components much simpler and easier to understand by abstracting away complex logic and state management.

4. Testability: Custom hooks are plain JavaScript functions, so they can be easily tested in isolation, which makes it simpler to ensure that your code is working correctly.

5. Maintainability: Custom hooks can help you make your code more modular and easier to maintain.

6. Code sharing: They are easier to share and reuse them across multiple projects.