종속성을받는 사용자 정의 후크를 작성하는 방법은 무엇입니까?

상태가 변경되면 너무 얽힌 사용자 정의 후크를 만들고 있습니다.

배열의 모든 상태를 전달할 수 있어야합니다.

import { useState, useEffect } from 'react'

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

export default useFlatListUpdate

그리고 그것은 다음과 같이 사용해야합니다

const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */])

그러나 그것은 다음과 같은 경고를줍니다.

React Hook useEffect는 종속성 배열에 확산 요소를 가지고 있습니다. 즉, 올바른 종속성을 전달했는지 여부를 정적으로 확인할 수 없습니다 .eslint (react-hooks / exhaustive-deps)

또한 작동하지 않는 다른 상황이 있습니다.

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, dependencies)

    return toggle
}

이것은 나에게 경고를 준다

React Hook useEffect에 배열 리터럴이 아닌 종속성 목록이 전달되었습니다. 즉, 올바른 종속성을 전달했는지 여부를 정적으로 확인할 수 없습니다 .eslint (react-hooks / exhaustive-deps)

경고없이 그리고 eslint를 비활성화하지 않고 어떻게이 작업을 수행 할 수 있습니까?

— 벤 코프 스키
소스

네 말이 맞아 내 대답은 잘못되었습니다. 나는 당신과 다른 사람들을 더 혼란스럽게하지 않기 위해 그것을 삭제했습니다. 🙏 사과합니다

— dance2die

@ dance2die 당신의 대답은 틀리지 않았습니다. 그러나 그것은 단지 다른 유형의 경고를주었습니다.

— Vencovsky

친절한 말 감사합니다. 나는 심판과 함께 일할 수 없었기 때문에이 문제를 다른 사람들에게 맡길 것입니다 :)

— dance2die

두 번째 예제의 경우 배열 내부에 종속성을 추가하십시오.useEffect(() => { setToggle(t => !t) }, [dependencies])

— Jon B

이 경우 종속성 목록 사용이 매우 독특합니다.
경고를 무시하거나 침묵시키는 것 외에 다른 방법은 보이지 않습니다.

경고를 끄려면 eslint완전히 비활성화하지 않아도됩니다 .
이 특정 라인에 대해이 특정 규칙을 비활성화 할 수 있습니다.

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    /* eslint-disable react-hooks/exhaustive-deps */
    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

— 케다
소스