Cfrtjryk

I'm playing with react hooks, implemented api request hook, to fetch a test list from the endpoint, it works, but I don't think it's the best - sexiest - way of doing it.

export const useYdlTestList = () => {

    const [ydlTestList, setYdlTestList] = useState();

    const [isLoading, setIsLoading] = useState(false);



    const fetchYdlTestList = async () => {

        try {

            setIsLoading(true);

            const { data } = await api.get("ydltest");

            setYdlTestList(data);

        } catch (e) {

            console.error(e);

        } finally {

            setIsLoading(false);

        }

    };



    useEffect(() => {

        if (!isLoading && !ydlTestList.length) {

            fetchYdlTestList();

        }

    });



    return ydlTestList;

};

Update

I cleaned up my code a bit by passing an empty array to useEffect so the effect would run only on mount

export const useYdlTestList = () => {

    const [ydlTestList, setYdlTestList] = useState();



    const fetchYdlTestList = async () => {

        try {

            const { data } = await api.get("ydltest");

            setYdlTestList(data);

        } catch (e) {

            console.error(e);

        }

    };



    useEffect(() => {

        fetchYdlTestList();

    }, );



    return ydlTestList;

};