依存関係を受け取るカスタムフックを作成する方法

いくつかの状態が変化したときにあまりにも角のあるカスタムフックを作成しています。

配列で任意の状態を渡すことができるはずです。

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の依存配列には、spread要素があります。これは、正しい依存関係を渡したかどうかを静的に検証できないことを意味します。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])

— ジョンB

この場合、依存関係リストの使用は非常に独特です。
警告を無視するか沈黙させる以外に、他の方法は見ません。

警告を止めるために、eslint完全に無効にする必要はありません。
この特定の行に対して、この特定のルールを無効にすることができます。

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

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

    return toggle
}

— ケダー
ソース