¿Cómo crear un enlace personalizado que reciba dependencias?

10

Estoy haciendo un gancho personalizado que tiene un toogle cuando algún estado cambia.

Debería poder pasar cualquier estado en una matriz.

import { useState, useEffect } from 'react'

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

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

    return toggle
}

export default useFlatListUpdate

Y debe usarse como 

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

Pero me da la siguiente advertencia

React Hook useEffect tiene un elemento extendido en su matriz de dependencias. Esto significa que no podemos verificar estáticamente si ha pasado las dependencias correctas.eslint (react-hooks / exhaustive-deps)

También tengo otra situación en la que no funciona.

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

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

    return toggle
}

Esto me da la advertencia

React Hook useEffect se le pasó una lista de dependencias que no es una matriz literal. Esto significa que no podemos verificar estáticamente si ha pasado las dependencias correctas.eslint (react-hooks / exhaustive-deps)

¿Cómo puedo hacer que esto funcione sin la advertencia y sin desactivar eslint?

reactjs react-native eslint react-hooks Vencovsky
fuente
Tienes razón. Mi respuesta es totalmente equivocada. Lo eliminé para no confundirte más a ti y a los demás. Me disculpo 🙏
dance2die
@ dance2die Su respuesta no fue incorrecta, pero solo dio otro tipo de advertencia.
Vencovsky
1
Gracias por las palabras amables. No pude hacerlo funcionar con los árbitros, así que dejaré este asunto a los demás :)
dance2die
para su segundo ejemplo, simplemente ponga dependencias dentro de una matriz:useEffect(() => { setToggle(t => !t) }, [dependencies])
Jon B

Respuestas:

0

El uso de la lista de dependencias es muy peculiar en este caso.
No veo otra manera, excepto ignorar o silenciar la advertencia.

Para silenciar la advertencia, no tenemos que desactivar por eslintcompleto.
Puede deshabilitar esta regla específica para esta línea específica:

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

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

    return toggle
}
ckedar
fuente