React use custom hook function

Question

I want use custom hook function

custom hook code

import { useState, useCallback, useEffect } from 'react';
import { apiClient } from './apiClient';

export default (api: string) => {
  const [data, setData] = useState();

  const getData = useCallback(async () => {
    try {
      const response = await apiClient.get(api);
      setData(response.data);
    } catch (err) {
      console.log(err);
    }
  }, [data]);

  return [data, getData];
};

app code

const [data, getData] = useGetData('posts');

  useEffect(() => {
    getData(); <- error
  }, []);

error message

Cannot invoke an object which is possibly 'undefined'.ts(2722)

How can use custom hook function ?

Cannot invoke an object which is possibly 'undefined'.ts(2722) this error message... — user16356642
– user16356642, Commented Jul 8, 2021 at 8:17

AKX · Accepted Answer · 2021-07-08 08:41:34Z

2

You will need to explicitly type the function to return a 2-tuple, since TypeScript can't perfectly infer that. It infers an array.

export default (api: string): [any, () => void] => {

(or a better type than any, but I don't know what your API returns.)

To improve typing, you might want to make it a generic function:

import { useState, useCallback } from "react";

export default function useGetData<T>(api: string): [T | undefined, () => void] {
  const [data, setData] = useState<T | undefined>(undefined);
  const getData = useCallback(async () => {
    try {
      const response = await apiClient.get(api);
      setData(response.data as T);
    } catch (err) {
      console.log(err);
    }
  }, [data]);
  return [data, getData];
}

edited Jul 8, 2021 at 8:41

answered Jul 8, 2021 at 8:31

AKX

171k17 gold badges148 silver badges230 bronze badges

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

Collectives™ on Stack Overflow

React use custom hook function

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