The Modern Way to Use Promise- Based HTTP Requests: axios-hooks

React Hooks for axios, with built-in support for server-side rendering

Riccardo Giorato
Nov 22, 2019 · 2 min read

What’s axios-hooks?

You might need to make requests to your own or external API in your React app and you usually needed to use Promises to get the results back, trying to use them inside your React components with the axios library.


All the axios awesomeness you are familiar with but simplified with Hooks.

  • One-line usage.
  • Super straightforward to use with server-side rendering.


To install it with npm:

How Do I Use It?

It will feel easy, like using useQuery from Apollo React with GraphQL queries.


This hook will return three simple elements:

  • loading: Boolean if the request is pending.
  • error: If the response contained an error code with related messages.
import { configure } from 'axios-hooks'
import LRU from 'lru-cache'
import Axios from 'axios'

const axios = Axios.create({
baseURL: ''

const cache = new LRU({ max: 10 })

configure({ axios, cache })

CodeSandbox React axios Playground

If you want to learn more about Hooks

I have personally read Learn React Hooks when I started using hooks and it helped me understand them to use tools such as useAxios:

Better Programming

Advice for programmers.

Riccardo Giorato

Written by

XR Developer and Photogrammetry Artist

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade