How to Write Our Own Custom Hooks in React

#react #javascript #beginners #webdev

To make life simpler for developers, React has introduced a wide variety of hooks. In addition, React allows us to build our own custom hooks.

Today, I will explain how we can create and use React custom hooks.

What are Custom Hooks in React?

React custom hooks are a way to extract component logic into reusable functions. There is one convention you should know about before writing our own React hooks

"use" in front of the custom hook

React advises us to only use React hooks inside React functional components or custom hooks. React advises us not to use React hooks inside regular JS functions. The thought process behind this is that if we use React hooks inside normal JS functions, there is a chance for them to get "hidden" inside the call stack. Especially in a large codebase, it would be impossible to go through each and every function to see where React hooks have been used.

The thought process is the same in this case as well. It would be simpler for us to determine where React hooks have been used if we prefixed our custom hook names with "use".

So, the name of your custom hook should look like this

useMyCustomHook()
useOnlineStatus()
useCommentFilter()

How to write React Custom Hooks?

I've created a simple React hook to check if a given player is retired or not.

useRetiredStatus.js

import {useEffect, useState} from "react";

const useRetiredStatus = (player) => {

    const [isRetired, setIsRetired] = useState(null);

    useEffect(() => {
        //Assumption: The age of retirement for cricket is 40 yrs
        player?.age > 40 ? setIsRetired(true) : setIsRetired(false)
    })

    return isRetired;
}

export default useRetiredStatus;

App.js

import React, {useEffect, useState} from 'react';
import useRetiredStatus from "./useRetiredStatus";

const players = [
    {name: "Kumar Sangakkara", age: 44},
    {name: "Angelo Mathews", age: 35},
    {name: "Rohit Sharma", age: 35},
    {name: "Mahela Jayawardene", age: 45},
    {name: "David Miller ", age: 33},
]

function App() {

    const [player, setPlayer] = useState(players[2]);
    const retiredStatus = useRetiredStatus(player);

    return (
        <>
            {`Dear Cricket Fans, ${player.name} is ${retiredStatus ? 'retired' : 'still playing the game'}`}
        </>
    );
}

export default App;

Output

With React Custom Hooks, there are no limitations. We can change input and output variables into anything we want just like in a regular function. With this knowledge, you will be able to create custom hooks for all the unique requirements in your projects.

Can't I just use a JS function, instead of creating a custom hook?

You can use a JS function if your code does not make use of React hooks.

If the code contains React hooks, you should create a custom hook so that your code aligns with React's rules of hooks

Conclusion

Learning how to make use of React custom hooks will make your code look more cleaner and more readable. I hope you will be able to implement React custom hooks in your next project.

Thank you for reading the article. Hope you learned something valuable today. Until next time, take care guys.