DEV Community

Cover image for How to Write Our Own Custom Hooks in React
Thisura Thenuka
Thisura Thenuka

Posted on • Originally published at simplecoder.hashnode.dev

How to Write Our Own Custom Hooks in React

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()
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Output

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.

Discussion (4)

Collapse
lukeshiru profile image
Luke Shiru

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
thisurathenuka profile image
Thisura Thenuka Author

Hi Luke, Thanks for the heads up. I didn't know about that until you told me. I've updated the code snippets accordingly. Thanks for the support ❤️✌️

Collapse
andrewbaisden profile image
Andrew Baisden

Custom Hooks really increase the power and flexibility for React applications. I'm trying to use them as much as possible now.

Collapse
ritikbanger profile image
Ritik Banger