У React Hook useEffect отсутствует зависимость: 'execute'

Question

Я не могу найти ответ на это, несмотря на попытки разных вещей. Я продолжаю получать сообщение об ошибке:

 Line 18:5:  React Hook useEffect has a missing dependency: 'execute'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
printWarnings

в этом файле:

import {useEffect, useState} from 'react'

export const createEffect = (fs, dependency) => {
    const[data, setData] = useState({})

    const execute = () => (
        fs().then(res => {
            setData(res)
        }).catch(err => {
            // do some magic
        })
    )

    useEffect(() => {
        execute()
        const interval = setInterval(execute, 15000)
        return(() => clearInterval(interval))
    }, [dependency])

    return(data)
}

TLDR - мне нужно сделать запрос на выборку определенной функции API, определенной fs(), либо каждый раз15 секунд или при изменении какого-либо глобального состояния, определяемого dependency. Я также хочу захватить данные и любые ошибки, поэтому я обертываю fs() парой блоков then() и catch().

Следующий код дает мне предупреждение вверхукогда я выполняю его внутри моего функционального компонента:

import createEffect from './components/createEffect'
~~~
let api = new api('http://localhost:8080/v1');
const[status, updateStatus] = useState(true);
const summary = createEffect(api.getSummary, status)

Есть идеи, как мне это исправить? Я новичок в React useEffect, а не на 100%, если это правильный способ сделать что-то подобное? Указание execute в качестве зависимости внутри моего вызова useEffect вызывает постоянное повторное рендеринг приложения. Я запускаю execute() перед вызовом setInterval(), потому что я хочу, чтобы запрос выполнялся каждые 15 секунд И при первом отображении компонента.

Для большего контекста: я создаю панель мониторинга в качестве примера проекта ихотите запрашивать несколько конечных точек API каждые 15 секунд или сразу после изменения какого-либо глобального состояния. Если глобальное состояние действительно меняется, я хочу сбросить свой HTTP-опрос с любого времени, оставшегося до 15 секунд.

Answer 1

Ошибка линтинга очень прямая, она просто говорит о том, что вам нужно сделать, либо оставив массив зависимостей useEffect пустым, либо добавив в него функцию execute.

По сути, потому что выполучить доступ к функции execute внутри обратного вызова эффекта, и, поскольку она создается в той же области действия, что и эффект, React требует, чтобы она была зависимостью.

Чтобы решить проблему с непрерывным повторным рендерингом, необходимоСделайте вашу функцию выполнения запомненной функцией, используя useCallback

Чтобы решить ее, достаточно просто:

const execute = useCallback(() => (
    fs().then(res => {
        setData(res)
    }).catch(err => {
        // do some magic
    })
), [setData]);

useEffect(() => {
        execute()
        const interval = setInterval(execute, 15000)
        return(() => clearInterval(interval))
    }, [execute])

Answer 2

Я думаю, вы можете добавить execute в качестве зависимости, так как само определение функции не меняется. Просто отладьте, если компонент повторно рендерит после каждого вызова. Я думаю, что они не должны.