Learn React Hooks

Creating API Hooks

We can also create Hooks for the various API calls. Putting these Hooks in a single file allows us to adjust the API calls easily later on. We are going to prefix our custom API Hooks with useAPI so it is easy to tell which functions are API Hooks.

Let's create custom Hooks for our API now using the following steps:

1. Create a new src/hooks/api.js file.
2. Import the useResource Hook from the react-request-hook library as follows:

import { useResource } from 'react-request-hook'

3. First, we define a useAPILogin Hook to log in a user; we simply cut and paste the existing code from the src/user/Login.js file like so:

export function useAPILogin () {    return useResource((username, password) => ({ url: `/login/${encodeURI(username)}/${encodeURI(password)}`, ...