Como criar um gancho personalizado que receba dependências?

10

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?

reactjs react-native eslint react-hooks 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
11
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

Respostas:

0

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