Introduction In this blog we will learn about what is a custom hook and build one — — to fetch data from API with reusable logic. useApi — to fetch data from API with reusable logic. useApi What is a custom hook? A custom hook is a JavaScript function whose name starts with “ ” and that may call other hooks. A custom hook allows you to extract some component's logic into a reusable function. use In simple terms, it is the react way of writing reusable logic that can be shared among different components. What are we building? We will build a custom hook called which will make the usual repetitive API fetch code reusable. useApi What API are we using? We will use which is a free online REST API that you can use whenever you need some fake user data. https://jsonplaceholder.typicode.com/users If you go to the above-mentioned URL, it will return an array of users. First, the user object’s structure is shown below. To understand the benefits of custom hooks, let’s look at how to do an API call One of the most basic things we need is a way to call get data from a server and while it is being fetched from the server, we show a loading screen. We usually need this repetitively at various places on the website. So what we usually do when we need to fetch data is: Show loading screen. Call the API. Once we get data from the server. Stop loading. Render/use data based on the use case. { useEffect, useState } App = { [loading, setLoading] = useState( ) [data, setData] = useState( ) fetchApi = { fetch( ) .then( { response.json() }) .then( { .log(json) setLoading( ) setData(json) }) }; useEffect( { fetchApi(); }, []); (loading) <h1>Data fetched successfully.</h1> }; App; // App.js import from "react" const => () const true const null const => () 'https://jsonplaceholder.typicode.com/users' => response return => json console false => () if return Loading < > h1 </ > h1 return < > div {JSON.stringify(data)} </ > div export default If you print the data in the browser console, this is what the API returns. Well, everything seems fine but think of a situation where we have a lot of API calls in various parts of the code base. In that case, we need to write this function, again and again. We we are repeating ourselves. Rather what we could do is think of a way to reuse the logic. Also, the code file gets unnecessarily cluttered. That’s what brings us to the need for a custom hook. fetchApi loading, response data logic Custom Hook approach Create a new file “ ”. Note that it is necessary to start this name with “ ”.We simply pasted our code in this file and made a few changes. One change you can see is that this returns some variables rather than JSX. useApi.js use App.js { useEffect, useState } useApi = { [loading, setLoading] = useState( ) [data, setData] = useState( ) fetchApi = { fetch(url) .then( { response.json() }) .then( { .log(json) setLoading( ) setData(json) }) }; useEffect( { fetchApi(); }, []); { loading, data } }; useApi; // useApi.js import from "react" const ( ) => url const true const null const => () // 'https://jsonplaceholder.typicode.com/users' => response return => json console false => () return export default To understand why we need this file, think of it as a file containing . This is where we have extracted the code which was going to be repeated everywhere but now it's all in one file. reusable code All we need to do now is just call this in App.js and the fetch logic as we have extracted it into our custom hook useApi remove useApi. New App.js useApi App = { { loading, data } = useApi( ) (loading) <h1>Data fetched successfully.</h1> }; App; // App.js import from './useApi' const => () const 'https://jsonplaceholder.typicode.com/users' if return Loading < > h1 </ > h1 return < > div {JSON.stringify(data)} </ > div export default We clearly see that number of lines of code has been reduced and the code looks cleaner. That’s the power of custom hooks. You can make this hook highly customisable by adding the different parameters of the fetch API like methods, headers, body, etc, but for now, I will keep it simple for easy understanding of the need and concept of custom hooks. Done! That’s all for this blog. If you found this blog helpful, clap and share it with your friends. This blog was initially published at https://www.gyaanibuddy.com/blog/custom-hook-in-react-js-for-calling-api-useapi/
