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
https://github.com/axios/axios

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.


Features

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

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

Installation

To install it with npm:


How Do I Use It?

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

useAxios

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: 'https://api.myjson.com/'
})

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: https://amzn.to/2Y8hoX9


Better Programming

Advice for programmers.

Riccardo Giorato

Written by

XR Developer and Photogrammetry Artist https://riccardogiorato.com/

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