React Hook useEffect 缺少依赖项：'fetchTracker'。 包括它或删除依赖项数组

Question

I have come across this issue in one of my projects. This specific file tracks data so that is can be placed on a map in an application.

I have looked elsewhere on StackOverflow for an explanation and resolution for the issue, but I haven't found anything that works. Any insight would be appreciated.

import { useEffect, useState } from 'react';
import axios from 'axios';

const API_HOST = '...';
const ENDPOINTS = [...];
const defaultState = {...};

const useTracker = ({ api = 'all' }) => {
    const [tracker = {}, updateTracker] = useState(defaultState);

    async function fetchTracker() {
        let route = ENDPOINTS.find(({ id } = {}) => id === api);
        let response;

        if (!route) {...}

        try {...} catch (e) {...}

        const { data } = response;

        updateTracker((prev) => {
            return {
                ...prev,
                state: 'ready',
                data
            };
        });
    }

    useEffect(() => {
        fetchTracker();
    }, [api]);

    return {
        fetchTracker,
        ...tracker
    };
};

export default useTracker;

Thanks

Answer 1

You need to include it to prevent side effect. To prevent a infinity loop wrap it in useCalback:

const useTracker = ({ api = 'all' }) => {
    const [tracker = {}, updateTracker] = useState(defaultState);

    const fetchTracker = React.useCallback(async () => {
        let route = ENDPOINTS.find(({ id } = {}) => id === api);
        let response;

        if (!route) {...}

        try {...} catch (e) {...}

        const { data } = response;

        updateTracker((prev) => {
            return {
                ...prev,
                state: 'ready',
                data
            };
        });
    },[api]);

    useEffect(() => {
        fetchTracker();
    }, [api, fetchTracker]);

    return {
        fetchTracker,
        ...tracker
    };
};