Custom React hook in TypeScript - has no call signatures

Question

I have this custom hook to call the API

import { useState, useCallback } from 'react';

interface OptionsShape {
  method: 'GET' | 'POST';
}

interface InitStateShape {
  data: any;
  success: boolean;
  loading: boolean;
  error: Error | null;
}

const useAPI = (initialData = null) => {
  const initialState: InitStateShape = {
    data: initialData,
    success: false,
    loading: false,
    error: null,
  };

  const [response, setResponse] = useState(initialState);

  const callAPI = async (URL: string, options: OptionsShape) => {
    setResponse({ ...response, success: false, loading: true });

    try {
      const response = await fetch(URL, options);
      if (response.status < 200 || response.status >= 300)
        throw new Error('Failed to fetch');
      const json = await response.json();
      setResponse({
        data: json,
        success: true,
        loading: false,
        error: null,
      });
    } catch (e) {
      setResponse({
        data: initialData,
        success: false,
        loading: false,
        error: e.message,
      });
    }
  };

  return [response, useCallback(callAPI, [])];
};

export { useAPI };

I'm calling it with

import { useAPI } from '../hooks/useAPI';
...
const [response, callAPI] = useAPI();
...
callAPI('https://api.mysite.com/test', { method: 'GET' });

The error I get on callAPI is:

This expression is not callable.
  Not all constituents of type '{ data: null; success: boolean; loading: boolean; error: null; } | ((URL: string, options: OptionsShape) => Promise<void>)' are callable.
    Type '{ data: null; success: boolean; loading: boolean; error: null; }' has no call signatures.ts(2349)

This has to do with the difference between Tuples and Arrays in Typescript. If you specify the type of the return value, the error is gone. The "as const" (answer below) also works, but smells a bit like a workaround. — BertC
– BertC, Commented Mar 28, 2023 at 13:46

Jonas Wilms · Accepted Answer · 2021-02-15 23:15:49Z

7

The return value is inferred as an array and not as a tuple. You can change that by adding as const:

 return [response, useCallback(callAPI, [])] as const;

answered Feb 15, 2021 at 23:15

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom React hook in TypeScript - has no call signatures

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related