How to create your own custom hooks stateful functions in React JS
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
- The function name must always start with keyword use as a prefix. Example: useAuth, useCart etc.
- The Hook function is just like a normal function except it does not return any HTML, but instead, returns state functions and attributes.
- To use the hook import it and use it within any other functional component.
Examplefunction MyProfile(){ const auth = useAuth() }
The function
useAuth()
is a hook.
Caution
Hooks only work with functional components and they don’t work with the class components. To learn more read Introduction of Hooks.
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 byfetchPosts()
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
Sandbox
View complete code on my Github Repository.




