Basic useApi React hook

api.js

const express = require('express')
var cors = require('cors')
const app = express()
const port = 9000
app.use(cors())

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

app.get('/success', (req, res) => {
  res.json({ data: { message: 'Hello World!' }, errors: [] })
})

app.get('/error', (req, res) => {
  sleep(500).then(() => {
      res.json({ data: { message: 'Error' }, errors: [{ message: 'Error' }] })
  });
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

App.js

import React from 'react'

function useApi(path) {
  const api = `http://localhost:9000${path}`

  const [state, setState] = React.useState({
    loading: true,
    data: null,
    errors: null,
  })

  React.useEffect(() => {
    setState({loading: true})

    fetch(api)
      .then(response => response.json())
      .then(response => {
        setState({
          loading: false,
          data: response.data,
          errors: response.errors,
        })
      }).catch(error => {
        setState({
          loading: false,
          data: null,
          errors: error,
        })
      })
  }, [api])

  return {...state}
}

function App() {
  const [path, setPath] = React.useState('/success')
  const { loading, data, errors } = useApi(path)

  if (loading) {
    return <p>Loading data from {path}...</p>
  }

  return (
    <>
      <button onClick={e => setPath(path === '/success' ? '/error' : '/success')}>Toggle</button>
      <p>Path: {path}</p>
      <p>Data: {JSON.stringify(data)}</p>
      <p>Errors: {JSON.stringify(errors)}</p>
    </>
  );
}

export default App;