Como criar um gancho personalizado que receba dependências?

Estou criando um gancho personalizado com um toogle quando algum estado muda.

Você deve conseguir passar qualquer estado em uma matriz.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

E deve ser usado como

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

Mas isso me dá o seguinte aviso

O React Hook useEffect possui um elemento de dispersão em sua matriz de dependências. Isso significa que não podemos verificar estaticamente se você passou pelas dependencies.eslint corretas (react-hooks / exaustive-deps)

Eu também tenho outra situação em que não funciona

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

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

    return toggle
}

Isso me dá o aviso

React Hook useEffect recebeu uma lista de dependências que não é uma matriz literal. Isso significa que não podemos verificar estaticamente se você passou pelas dependencies.eslint corretas (react-hooks / exaustive-deps)

Como posso fazer isso funcionar sem o aviso e sem desativar o eslint?

— Vencovsky
fonte

Você está certo. Minha resposta está completamente errada. Excluí-o para não confundir você e outras pessoas ainda mais. Eu peço desculpas 🙏

— dance2die

@ dance2die Sua resposta não estava errada, mas apenas deu outro tipo de aviso.

— Vencovsky

Obrigado pelas palavras amáveis. Eu não era capaz de fazê-lo funcionar com refs ou então vou deixar este assunto para os outros :)

— dance2die

para o seu segundo exemplo, basta colocar dependências dentro de uma matriz:useEffect(() => { setToggle(t => !t) }, [dependencies])

— Jon B

O uso da lista de dependências é muito peculiar neste caso.
Não vejo outra maneira, exceto ignorar ou silenciar o aviso.

Para silenciar o aviso, não precisamos desativar eslintcompletamente.
Você pode desativar esta regra específica para esta linha específica:

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

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

    return toggle
}

— ckedar
fonte