The Hook is an additional feature provided in React Version 16.8 onwards. A hook lets you create a functional state and reuse the logic in different functional components.

Rules of Creating a Hook

1. The function name must always start with keyword use as a prefix. Example: useAuth, useCart etc.
2. The Hook function is just like a normal function except it does not return any HTML, but instead, returns state functions and attributes.
3. To use the hook import it and use it within any other functional component.
   Example

   function MyProfile(){
       const auth = useAuth()
   }
   

   The function useAuth() is a hook.

In this post, I’ll show how to create a custom hook using posts as an example. Before that open your react project and configure absolute imports.
In jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

Creating Custom Hook

In src\lib\hooks.js

import React, { useEffect, useState } from 'react'

export default function usePosts(  ){
    const [ posts, setPosts ] = useState( [] )
    const [ isLoading, setIsLoading ] = useState( false )
    const [ count, setCount ] = useState( 0 )

    useEffect( ( ) => {
        setCount(posts.length)
    }, [ posts ] )

    const fetchPosts = async( ) => {
        setIsLoading(true)

        let url = `https://jsonplaceholder.typicode.com/posts`
        let res = await fetch( url )
        res = await res.json()

        if( res.length ){
            setPosts([...res])
        }

        setIsLoading(false)
    }

    return {
        posts,
        fetchPosts,
        count,
        isLoading,
        setIsLoading,
    }
}

The hook usePosts will fetch all the posts from API and set to setPosts() a state management function.
Here we specify three states they are:

• In [ posts, setPosts ] posts will be a store that is retrieved by fetchPosts() function.
• [ isLoading, setIsLoading ] state sets whether the posts are loading or not
• [ count, setCount ] returns the count of posts.

The post data are retrieved using JSON Placeholder.
The name of the hook function must always start with the use keyphrase.

Modifying App Component

Now import the hook function usePosts and use it in App the functional component.
In src\App.js

import usePosts from 'lib/hooks';
import React from 'react';

function App() {

    const posts = usePosts()

    return (
        <>

            <h1>Posts | <button onClick={ posts.fetchPosts } type="button" >Load Posts </button> </h1>

            { posts.count > 0 ? <div>Total Posts : {posts.count} </div> : null }

            <div>
            {
                ( !posts.isLoading )
                ? ( posts.posts.length )
                    ? posts.posts.map( (item, index) => {
                        return (
                            <div key={index} style={ { border : '1px solid #eee', padding : '10px 5px' } } >
                            <p>Title: { item.title }</p>
                            <p>{ item.body }</p>
                            </div>
                        )
                        } )
                    : null

                : (
                    <div>Please wait...</div>
                )
                
            }
            </div>

        </>
    )

}

export default App;    

The posts are loaded when the button is clicked and displayed as a list. The count of the posts is also displayed at the top.

Render App Component

In src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
  document.getElementById('root')
);

In the end, import the App component and render it.

Output

The final output of how to create your own custom hooks in react js

Watch Video

Click to Play Video

Sandbox

View complete code on my Github Repository.

Summary

Reviewer

TheCodeLearner

Review Date

2021-10-16

Reviewed Item

How to create your own custom hooks stateful functions in React JS

Author Rating

5

Software Name

React JS

Software Name

Windows Os, Mac Os, Ubuntu Os

Software Category

Web Development