DEV Community

useAxios : A simple custom hook for calling APIs using axios

Yogini Bende on May 18, 2021

Hello folks, Frontend apps are not complete if there are no api calls involved and calling an api becomes a little repetitive thing to do. By cre...

Read full post

ecyrbe • May 18 '21 • Edited

Hello,

here is a reviewed code for final solution :

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

/**
 fixed :
  - no need to JSON.stringify to then immediatly do a JSON.parse
  - don't use export defaults, because default imports are hard to search for
  - axios already support generic request in one parameter, no need to call specialized ones
**/
export const useAxios = (axiosParams) => {
    const [response, setResponse] = useState(undefined);
    const [error, setError] = useState('');
    const [loading, setloading] = useState(true);

    const fetchData = async (params) => {
      try {
       const result = await axios.request(params);
       setResponse(result.data);
       } catch( error ) {
         setError(error);
       } finally {
         setLoading(false);
       }
    };

    useEffect(() => {
        fetchData(axiosParams);
    }, []); // execute once only

    return { response, error, loading };
};

and to use it :

import { useAxios } from 'axioshook';

const App = () => {
    const { response, loading, error } = useAxios({
        method: 'POST',
        url: '/posts',
        headers: { // no need to stringify
          accept: '*/*'
        },
        data: {  // no need to stringify
            userId: 1,
            id: 19392,
            title: 'title',
            body: 'Sample text',
        },
    });

    return (
        <div className='App'>
            <h1>Posts</h1>

            {loading ? (
                <p>loading...</p>
            ) : (
                <div>
                    {error && (
                        <div>
                            <p>{error.message}</p>
                        </div>
                    )}
                    <div> {
                      // no need to use another state to store data, response is sufficient
                      response && <p>{response.id}</p>
                    }
                    </div>
                </div>
            )}
        </div>
    );
};

Yogini Bende • May 19 '21

This is a really good optimisation, specially the axios.request 👏
Two points to consider here -

JSON.stringify and JSON.parse was used to avoid possibility of any errors.
An extra state was added in the App component, as we may need to process some data coming from the api response (which is mostly the case).

Thanks for sharing this 🙌

👺Mervyn • May 19 '21

Exactly what I was thinking while reading the post XD. And maybe wrap this in React Query for an even juicier hook!

ecyrbe • May 21 '21

You can get it here :

httpss://github.com/ecyrbe/react-axios-query

It's juste a wrapper. Really simple.

Muhammad Ayoub Khan • Jun 13 '22

Correct link :)
github.com/ecyrbe/react-axios-query

Seetaram Yadav • Aug 25 '22 • Edited

There is small syntax error in losing callback. instead of setloading it should be setLoading. `import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'jsonplaceholder.typicode.com';

/**
fixed :

no need to JSON.stringify to then immediatly do a JSON.parse
don't use export defaults, because default imports are hard to search for
axios already support generic request in one parameter, no need to call specialized ones **/

`import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'jsonplaceholder.typicode.com';

/**
fixed :

no need to JSON.stringify to then immediatly do a JSON.parse
don't use export defaults, because default imports are hard to search for
axios already support generic request in one parameter, no need to call specialized ones
**/
export const useAxios = (axiosParams) => {
const [response, setResponse] = useState(undefined);
const [error, setError] = useState('');
const [loading, setLoading] = useState(true);

const fetchData = async (params) => {
try {
const result = await axios.request(params);
setResponse(result.data);
} catch( error ) {
setError(error);
} finally {
setLoading(false);
}
};

useEffect(() => {
fetchData(axiosParams);
}, []); // execute once only

return { response, error, loading };
};`

Matek • Nov 22 '22

Hi, small fix:
here const [loading, setloading] = useState(true);
to const [loading, setLoading] = useState(true);

upperCase "L"

Greetings

Mohammad Kamrul Hasan • May 23 '21

A correction:
Add axiosParams to the empty list in the second param of the useEffect hook. This will remove a dependency error

Peng • May 19 '21

Wow

Antolin B. Bernas Jr. • Oct 27 '21

sir what if the structure has axios interceptor and header is with bearer token?

dastasoft • May 18 '21

Nice article and well explained! If you want to go further with the hook I always recommend this article of Kent C Dodds about not using booleans for loading

Yogini Bende • May 19 '21

Yes, that is also a good approach. But, if I am using reducers, I just go with states as reducers help us updating states synchronously.

dastasoft • May 19 '21

Reducers can also be useful when the different states are closely related, although both options are good in this case :)

Mason Embry • May 19 '21

I believe your fetchData function is getting recreated on every render of the hook. Consider moving it into a useCallback. I'm curious what other people think about that or if I'm missing something. Nice hook!

ecyrbe • May 19 '21 • Edited

useCallback don't magically make the function not being recreated... it just makes sure the instance created the first time is used the second time, etc... but unfortunately function creation is still done at runtime, so no performance gain from using useCallback.

So you should only use useCallback if you need a stable function instance for referencing in another component.

Since fetchData is only used internally and not exposed outside the hook, useCallback will in fact bring a memory cost and no performance gain.

See this article or this one for another explanation

Mason Embry • May 19 '21

Yeah, I knew the primary purpose of useCallback was for a stable reference but I also thought it was important in some cases for performance reasons. Those articles are helpful for understanding that that's not a big deal. Thanks!

Yogini Bende • May 20 '21

Really good explanation here! Even I wondered initially if useCallback will make any difference. Thanks for sharing!

Comment deleted

Yogini Bende • May 21 '21

Any issue occurred? Can you please share details?

Douglas Trofino • May 21 '21

Nice hook!
I will try that in my projects. Thank you for sharing!
I just would return the hooks states as an array, so I can rename it.

return [ response, error, loading ];

const [ products, productsError, productsLoading ] = useAxios(params);

In case a I need more than one api request in the same component, I can differentiate them.

Steven Than • May 21 '21

You can rename with object returns as well

const { response: products, loading: productsLoading, error: productsError } = useAxios(...)

Yogini Bende • May 21 '21

Hey, that's a nice improvement!

James Burton • May 21 '21

Other potential enhancements:
Add local storage and stale state cache, to show stale whilst loading new version.
Add withAxios HOC to wrap and inject these properties into any "dumb" component.
Provide an example extending the hook to tailored hooks:
const usePost = id => useAxios('/api/posts/' + id);
... It's an option for grouping your data access into a secondary layer, so components then just hooks the most basic hooks.
Providing examples to disable/mock the fetch in unit tests is a handy one to consider ... Storybook too ... Like having a testData parameter which is used if typeof window != 'object', or jest mocking.
Finally a withAxiosDisplay HOC could wrap that with a loader overlay, loading spinner or skeleton display, error display, and then child component, so you get this:
let Post = ({data}) => {
// Just render from data
};
const Post123 = withAxiosDisplay('/api/post/123', Post):
// Render
... Loading display, error handler, retry and passing data then all included.

Anas Tawfik • May 21 '21

wow, great job that looks nice, but it might be impractical to use for POST methods as you want to control the triggering of the request, like when user submit a form, but hooks are triggered once the component is loaded and you can't use it inside a function or a condition,
what about implementing same as Apollo does, if the method is POST, you dont trigger the fetchData yourself, but return it with the other variables.

I also agree with the comment below that suggest using an array so we can rename it on use, so it can be used multiple times same component, like GET the saved form values, then POST after the user fill the rest of the form and submit

AmanZrx4 • Aug 2 '22

I was thinking the same, but then even if we return the fetch method, we just cannot use a custom hook inside an event handler. Then we have to revert back to a normal js function or a fetch component, no more a custom hook. React is weird. I didn't find any standard way to achieve this

Itay • Dec 27 '22

I've used this solution with TypeScript and added an option to cancel the request:

import axios, { AxiosError, AxiosRequestConfig } from 'axios';
import { useEffect, useRef, useState } from 'react';
import { environment } from '../../environments/environment';

axios.defaults.baseURL = environment.baseUrl;

/**
 * Generic T: represents the data returned from API request.
 *
 * Generic D: represents the body data of the Axios
 * request (usually does not exist in GET method).
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const useAxios = <T, D = any>(axiosParams: AxiosRequestConfig<D>) => {
  const [response, setResponse] = useState<T | null>(null);
  const [error, setError] = useState<AxiosError | unknown>();
  const [loading, setLoading] = useState(true);
  const controllerRef = useRef(new AbortController());
  const cancelRequest = () => {
    controllerRef.current.abort();
  };

  useEffect(() => {
    const fetchData = async (params: AxiosRequestConfig<D>) => {
      try {
        const result = await axios.request<T>({
          ...params,
          signal: controllerRef.current.signal,
        });
        setResponse(result.data);
      } catch (err: AxiosError | unknown) {
        if (axios.isAxiosError(err)) {
          setError(err);
          // this will narrow the type :)
          // Access to config, request, and response
        } else {
          setError(err);
          // Just a stock error
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData(axiosParams);
  }, [axiosParams]);

  return { cancelRequest, response, error, loading };
};

Brayan Arrieta • May 18 '21

nice post I recommend a change from then/catch to async/await approach

Rajvir Singh • Jul 23 '21

Hello,
This is good. However, I want to ask if I want to use in onClick function. Something like calling the hook on user login. How can we do it ?

Muhammad Ayoub Khan • Jun 13 '22

I also want this.

Pedro Luz • May 21 '21

Never understood quite the use of hooks like this. Requests should not be made from inside components, mainly due to separation of concerns and specially in the case that you might need to make the same request from multiple places in you application. So would you use that twice in 2 diferent components?

The only point I see in using this is for a quick prototype to trash the next day.

Personally since I also use redux-sagas, there is usage for me.

But still a good tutorial :)

João Ribeiro • May 21 '21

Nice! But it's more useful to export a fetch action instead of the data. This way you can fetch data when you need it instead of doing it only on mount. You also need something like redux or context to set/get the api response.

Jace Chou • Jan 17 '22 • Edited

Nice hook!

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = ({ url, method, body = null, headers = null, config = {} }) => {
    ...

    const fetchData = () => {
        axios[method](url, JSON.parse(headers), JSON.parse(body), ...config)
            .then((res) => {
                setResponse(res.data);
            })
            .catch((err) => {
                setError(err);
            })
            .finally(() => {
                setloading(false);
            });
    };

    useEffect(() => {
        fetchData();
    }, [method, url, body, headers, config]);

    return { response, error, loading };
};

export default useAxios;

In component:

// App component
import { CancelToken } from 'axios';

const App = () => {
    const source = CancelToken.source()
    const { response, loading, error } = useAxios({
        method: 'post',
        url: '/posts',
        headers: JSON.stringify({ accept: '*/*' }),
        config: {
            cancelToken: source.token,
        },
        body: JSON.stringify({
            userId: 1,
            id: 19392,
            title: 'title',
            body: 'Sample text',
        }),
    });
    ...

    source.cancel('cancel request')

}

imageck • Feb 6 '23

Unfortunately, I have to admit that this custom hook is futile and impractical. Could you please give a real-life example instead of making a request manually like useAxios({ data: "HAHA look" })?

Like @anastawfik mentioned, it's not possible to call this hook inside a JavaScript function, i.e. the submit handler, which is like 90% of cases where we would need such a hook in the first place.

In any case, it's more to do with React.

Shashwat jaiswal • May 10

A little modification and you can use it on click.

Read here

毛亚琛 • May 25 '21

try use swr

Alexandro Arauco • Oct 4 '21

Great example, but i have a some question.

How can invoke this custom Hook from a button? (Post Request)

alxizr • May 31 '21

you need to learn about react query or useSWR.

Yogini Bende • Jun 1 '21

noted 😇

Abhay Patil • Aug 18 '22

I made a get call to fetch the posts using get method, but I want to make a post reuest when user clicks on Add button , so I am calling the hook as ->

 const HandleAdd = () => {

    const { data, loading, error } = useApi({
        method: 'post',
        url: '/posts',
        headers: JSON.stringify({ accept: '*/*' }),
        body: JSON.stringify({
            userId: 1,
            id: 19392,
            title: 'title',
            body: 'Sample text',
        }),
    });  
 }

this is causing error , how can I make a post request then.
codesandbox.io/s/currying-bush-yic...

Will Adams • May 22 '21

Interesting, though a few things I'm not clear on.

Why not use an instance of axios instead of setting defaults?
Axios stringifies and parses JSON for you, so why did you stringify and parse?
Why do you have local state in App when it's the same data as the response you get from your hook? I don't see any reason for duplicating it or using state or useEffect in App.

Melford Birakor • May 21 '21

Worth Reading! ❤️

alxizr • May 31 '21

you need to learn about react query or useSWR

Dimer Bwimba • Nov 18 '21 • Edited

what if I want to submit something... kindda confusing!

Tuyen Vd. • May 26 '21

it will better if you handle load more in your custom hook

Nguyễn Công Dũng • May 23 '21

I have a error in useEffect. How to fixed?

React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

Hullen Gonzales • Jun 8 '21

You can disable it with a comment // eslint-disable-next-line react-hooks/exhaustive-deps. Because fetchData need to be called only on mount component cycle.