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

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.

Axios-hooks is here to solve this problem with a simpler syntax using the complete power of React Hooks in a few lines of code.

Features

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

Zero configuration, but configurable in case it’s needed.
One-line usage.
Super straightforward to use with server-side rendering.

Installation

To install it with npm:

npm install axios axios-hooks

To install it with Yarn:

yarn add axios axios-hooks

Axios is a peer dependency and needs to be installed explicitly.

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:

data: An object containing the response from the server.
loading: Boolean if the request is pending.
error: If the response contained an error code with related messages.

You will access the useAxios Hook to do almost every operation and, in some cases, also the configure Hook to define an API-base endpoint URL.

import React from "react"
import ReactDOM from "react-dom"
import useAxios from "axios-hooks"

function App() {
  const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
    "https://api.myjson.com/bins/820fc"
  )

  const [
    { data: putData, loading: putLoading, error: putError },
    executePut,
  ] = useAxios(
    {
      url: "https://api.myjson.com/bins/820fc",
      method: "PUT",
    },
    { manual: true }
  )

  function updateData() {
    executePut({
      data: {
        ...getData,
        updatedAt: new Date().toISOString(),
      },
    })
  }

  if (getLoading || putLoading)
    return (
      <div>
        <button>...</button>
        <pre>NOW: ...</pre>
        <pre>INITIAL: ...</pre>
      </div>
    )

  if (getError || putError) return <p>Error!</p>

  function getLatestTime() {
    if (putData && putData.updatedAt) return putData.updatedAt
    else return getData.updatedAt
  }
  const currentTime = getLatestTime()

  return (
    <div>
      <button onClick={updateData}>Update remote Time</button>
      <pre>NOW: {new Date(currentTime).toISOString().split("T")[1]}</pre>
      <pre>
        INITIAL: {new Date(getData.updatedAt).toISOString().split("T")[1]}
      </pre>
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)

CodeSandbox React axios Playground

Complete CodeSandbox